@3846masa/bmp

@3846masa/bmp

Create a BMP (w/ alpha channel) binary from RGBA raw bytes like ImageData.

• faster than other libraries (e.g. bmp-js)
• tiny size (basic: ~ 500 bytes, webworker: ~ 700 bytes)
• supports alpha channel

Table of Contents

• Usage
  • CDN
  • Using via bundler
• API
  • convert({ width, height, data })
  • HTMLCanvasElement.prototype.toBlob(callback, type)
• Contributing
• License

Usage

CDN

Basic

See ./examples/basic.

<script type="module">
  import { convert } from 'https://unpkg.com/@3846masa/bmp/lib/convert.mjs';

  const canvas = document.getElementById('canvas');
  const bmpImg = document.getElementById('bmp');

  function main() {
    const ctx = canvas.getContext('2d');

    const raw = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const bmpBinary = convert(raw);
    const blob = new Blob([bmpBinary], { type: 'image/bmp' });

    bmpImg.src = URL.createObjectURL(blob);
  }

  main();
</script>

WebWorker

See ./examples/webworker.

<script type="module">
  import { convert } from 'https://unpkg.com/@3846masa/bmp/lib/worker.mjs';

  const canvas = document.getElementById('canvas');
  const bmpImg = document.getElementById('bmp');

  async function main() {
    const ctx = canvas.getContext('2d');

    const raw = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const bmpBinary = await convert(raw);
    const blob = new Blob([bmpBinary], { type: 'image/bmp' });

    bmpImg.src = URL.createObjectURL(blob);
  }

  main().catch(console.error);
</script>

No module

See ./examples/canvas-to-blob.

<script src="https://unpkg.com/@3846masa/bmp/lib/polyfill.js"></script>
<script>
  const canvas = document.getElementById('canvas');
  const bmpImg = document.getElementById('bmp');

  function main() {
    canvas.toBlob(callback, 'image/bmp');

    function callback(blob) {
      const blobUrl = URL.createObjectURL(blob);
      bmpImg.addEventListener('load', () => URL.revokeObjectURL(blobUrl), { once: true });
      bmpImg.addEventListener('error', () => URL.revokeObjectURL(blobUrl), { once: true });
      bmpImg.src = blobUrl;
    }
  }

  main();
</script>

Using via bundler

npm i @3846masa/bmp

import { convert } from '@3846masa/bmp';

API

convert({ width, height, data })

Convert RGBA raw bytes like ImageData to a BMP binary.

In worker.mjs, this function returns Promise.

width	number
height	number
data	Uint8Array | Uint8ClampedArray
Returns	Uint8Array | Promise<Uint8Array>

HTMLCanvasElement.prototype.toBlob(callback, type)

callback	(blob: Blob) => any
type	'image/bmp'

Contributing

PRs accepted.

License

MIT (c) 3846masa