A simple JPEG compression library for WebAssembly
npm install compress-jpeg.jpg file, but a visually compressed ImageData that simulates JPEG compression artifacts—including blockiness, color loss, and ringing—directly in the browser.
0.0 → 1.0)
ImageData
compress_jpeg(imageData: ImageData, compression: number): ImageData
bash
npm install compress-jpeg
or
yarn add compress-jpeg
`
🚀 Usage
`typescript
import init, { compress_jpeg } from "compress-jpeg";
async function run() {
await init(); // initialize WASM module
const canvas = document.getElementById("my-canvas") as HTMLCanvasElement;
const ctx = canvas.getContext("2d")!;
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
/**
* Compression strength (0.0 → 1.0)
*
* - 0.0 = no compression (highest quality)
* - 1.0 = strongest compression (lowest quality, heavy artifacts)
*
* Recommended ranges:
* - 0.7–1.0 → strong blockiness / heavy JPEG artifacts
* - 0.3–0.7 → medium compression
* - 0.0–0.3 → light compression / near-lossless
*/
const compression = 0.4;
const output = compress_jpeg(imageData, compression);
// Draw result onto canvas
ctx.putImageData(output, 0, 0);
}
``