@3846masa/bmp
TypeScript icon, indicating that this package has built-in type declarations

1.1.3 • Public • Published

@3846masa/bmp

banner

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) {
      bmpImg.src = URL.createObjectURL(blob);
    }
  }

  main();
</script>

Using via bundler

bundlephobia

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

API

convert({ width, height, data }, options?)

Convert RGBA raw bytes like ImageData to a BMP binary.

In worker.mjs, this function returns Promise.

width number
height number
data Uint8Array | Uint8ClampedArray
options.strict boolean
Returns Uint8Array | Promise<Uint8Array>

HTMLCanvasElement.prototype.toBlob(callback, type)

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

Contributing

PRs accepted.

License

MIT (c) 3846masa

Readme

Keywords

Package Sidebar

Install

npm i @3846masa/bmp

Weekly Downloads

34

Version

1.1.3

License

MIT

Unpacked Size

15.7 kB

Total Files

12

Last publish

Collaborators

  • 3846masa