@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
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) {
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?)
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.