@3846masa/bmp 中文文档教程

Question

@3846masa/bmp

从 RGBA 原始字节（如 ImageData）创建 BMP（带 alpha 通道）二进制文件。

• 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

请参阅 ./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

请参阅 ./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

请参阅 ./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

npm i @3846masa/bmp

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

API

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

将 RGBA 原始字节（如 ImageData）转换为 BMP 二进制文件。

在 worker.mjs 中，此函数返回 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

接受 PR。

License

麻省理工学院 (c) 3846masa