libvips for the browser and Node.js, compiled to WebAssembly with Emscripten.
Programs that use wasm-vips don't manipulate images directly, instead they create pipelines of image processing operations building on a source image. When the end of the pipe is connected to a destination, the whole pipeline executes at once, streaming the image in parallel from source to destination a section at a time. Because wasm-vips is parallel, it's quick, and because it doesn't need to keep entire images in memory, it's light.
Note: This library is still under early development. See: #1.
An engine that supports WebAssembly SIMD. This is present on most major browser engines. Node.js >= 16.4.0 is required to match the final SIMD opcodes.
Chrome |
Firefox |
Edge |
Node.js |
---|---|---|---|
✔️ version 91+ |
✔️ version 89+ |
✔️ version 91+ |
✔️ version 16.4+ |
wasm-vips can be installed with your favorite package manager.
npm install wasm-vips
yarn add wasm-vips
Requires vips.js
, vips.wasm
and vips.worker.js
to be served from
the same directory.
Since wasm-vips requires the SharedArrayBuffer
API, the website needs to opt-in to
a cross-origin isolated state, by serving the following HTTP headers on
the main document:
Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin
See here for more information.
After that, wasm-vips can be imported and initialized like this:
<script src="vips.js"></script>
<script type="module">
const vips = await Vips();
</script>
On Node.js, wasm-vips is published as a dual-package, so it can be imported as both CommonJS and ES6 module:
// ES6 module
import Vips from 'wasm-vips';
// CommonJS module
const Vips = require('wasm-vips');
Then, wasm-vips can be initialized like this:
// Usage with top-level await
const vips = await Vips();
// Usage with .then
Vips().then(vips => {
// Code here
});
// Load an image from a file
let im = vips.Image.newFromFile('owl.jpg');
// Put im at position (100, 100) in a 3000 x 3000 pixel image,
// make the other pixels in the image by mirroring im up / down /
// left / right, see
// https://libvips.github.io/libvips/API/current/libvips-conversion.html#vips-embed
im = im.embed(100, 100, 3000, 3000, {
extend: 'mirror'
});
// Multiply the green (middle) band by 2, leave the other two alone
im = im.multiply([1, 2, 1]);
// Make an image from an array constant, convolve with it
const mask = vips.Image.newFromArray([
[-1, -1, -1],
[-1, 16, -1],
[-1, -1, -1]
], 8.0);
im = im.conv(mask, {
precision: 'integer'
});
// Finally, write the result to a buffer
const outBuffer = im.writeToBuffer('.jpg');