wasm-image
68 |blazing fast image processing in WebAssembly
69 |Install
70 |npm i wasm-image
71 | # or
72 | yarn install wasm-imageIf you want to use it in a frontend web project, please make sure you use a module bundler that supports WebAssembly, like webpack.
74 |WebAssembly is supported in all modern browsers.
75 |Usage
76 |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";
78 |
79 | const WasmImg = new WasmImage();
80 | WasmImg.setImage(new Uint8Array(buffer));Note: you can convert a file into a conforming buffer like this
82 |getImageAsArrayBuffer = async (file: File): Promise<ArrayBuffer> => {
84 | const result = await new Promise<ArrayBuffer>((resolve, reject) => {
85 | const reader = new FileReader();
86 | reader.onloadend = () => {
87 | if (reader.result instanceof ArrayBuffer) {
88 | return resolve(reader.result);
89 | } else {
90 | return reject(new Error("Could not create arraybuffer"));
91 | }
92 | };
93 | reader.onerror = reject;
94 | reader.readAsArrayBuffer(file);
95 | });
96 |
97 | return result;
98 | };Afterwards, you can execute as many operations as you want on the image:
101 |await WasmImg.rotate(90);
102 | await WasmImg.brighten(1);
103 | ...Afterwards you can retrieve your image from WebAssembly:
105 |const modifiedImage: Uint8Array = await WasmImg.getImage();Limitations
107 |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.
108 |License
109 |MIT
110 |Sponsors
111 |