README
@jsquash/jpeg
An easy experience for encoding and decoding JPEG images in the browser. Powered by WebAssembly ⚡️.
Uses the MozJPEG library.
A jSquash package. Codecs and supporting code derived from the Squoosh app.
Installation
npm install --save @jsquash/jpeg
# Or your favourite package manager alternative
Usage
Note: You will need to either manually include the wasm files from the codec directory or use a bundler like WebPack or Rollup to include them in your app/server.
Decodes JPEG binary ArrayBuffer to raw RGB image data.
data
Type: ArrayBuffer
Example
import { decode } from '@jsquash/jpeg';
const formEl = document.querySelector('form');
const formData = new FormData(formEl);
// Assuming user selected an input jpeg file
const imageData = await decode(await formData.get('image').arrayBuffer());
Encodes raw RGB image data to JPEG format and resolves to an ArrayBuffer of binary data.
data
Type: ImageData
options
Type: Partial<EncodeOptions>
The MozJPEG encoder options for the output image. See default values.
Example
import { encode } from '@jsquash/jpeg';
async function loadImage(src) {
const img = document.createElement('img');
img.src = src;
await new Promise(resolve => img.onload = resolve);
const canvas = document.createElement('canvas');
[canvas.width, canvas.height] = [img.width, img.height];
const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
return ctx.getImageData(0, 0, img.width, img.height);
}
const rawImageData = await loadImage('/example.png');
const jpegBuffer = await encode(rawImageData);