wasm-image

blazing fast image processing in WebAssembly

⚠️ 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

Sponsors