@3846masa/bmp

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

Usage no npm install needed!

<script type="module">
  import 3846masaBmp from 'https://cdn.skypack.dev/@3846masa/bmp';
</script>

README

@3846masa/bmp

npm-badge mit-license-badge

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

Basic

basic codesandbox-badge

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

webworker codesandbox-badge

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

no-module codesandbox-badge

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

bundlephobia

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