wasm-image

blazing fast image processing in WebAssembly

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();

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.

License

MIT

Sponsors