wasm-image
v0.1.0
Published
an image manipulation wrapper, JS API for Rust image
Downloads
9
Readme
wasm-image
blazing fast image processing in WebAssembly
:warning: Please check the limitations. This is still a work in progress!
Install
npm i wasm-image
# or
yarn install wasm-image
If you want to use it in a frontend web project, please make sure you use a module bundler that supports WebAssembly, like webpack.
WebAssembly is supported in all modern browsers.
Usage
The small JavaScript wrapper on top of the WASM module is src/image.ts
. As WASM with shared memory is not well supported yet, you need to load the image into the wrapper first:
import { WasmImage } from "wasm-image";
const WasmImg = new WasmImage();
WasmImg.setImage(new Uint8Array(buffer));
Note: you can convert a file into a conforming buffer like this:
getImageAsArrayBuffer = async (file: File): Promise<ArrayBuffer> => {
const result = await new Promise<ArrayBuffer>((resolve, reject) => {
const reader = new FileReader();
reader.onloadend = () => {
if (reader.result instanceof ArrayBuffer) {
return resolve(reader.result);
} else {
return reject(new Error("Could not create arraybuffer"));
}
};
reader.onerror = reject;
reader.readAsArrayBuffer(file);
});
return result;
};
Afterwards, you can execute as many operations as you want on the image:
await WasmImg.rotate(90);
await WasmImg.brighten(1);
...
Afterwards you can retrieve your image from WebAssembly:
const modifiedImage: Uint8Array = await WasmImg.getImage();
Supported image operations
Please check our docs for all available image processing functions.
Limitations
The Rust library used for this project is image. All limitations that are mentioned for this library are obviously also valid for this WASM wrapper.
Please make sure you read the list of supported image formts.
WARNING
The package currently only supports PNG, the rest is a work in progress.
License
MIT