Pixel-by-pixel Comparison - Rust + WASM in JavaScript

The same diff core, compiled to WebAssembly with SIMD. @blazediff/core-wasm runs in browsers, Workers, Deno, Bun, and edge runtimes - ~58% faster than pixelmatch from a 32KB binary. Reach for it when you want native-grade speed in the browser without a native dependency. The API takes pre-decoded RGBA buffers, so you decode images yourself with createImageBitmap + a canvas (or the ImageDecoder API).

Installation


npm install @blazediff/core-wasm


pnpm add @blazediff/core-wasm


yarn add @blazediff/core-wasm


bun add @blazediff/core-wasm

Decoding images to RGBA


async function loadRgba(url: string) {
  const bitmap = await createImageBitmap(await (await fetch(url)).blob());
  const canvas = new OffscreenCanvas(bitmap.width, bitmap.height);
  const ctx = canvas.getContext("2d")!;
  ctx.drawImage(bitmap, 0, 0);
  const { data, width, height } = ctx.getImageData(0, 0, bitmap.width, bitmap.height);
  return { data: new Uint8Array(data.buffer), width, height };
}

Examples

Basic Comparison

Image 1

Image 2

Result


import { initBlazediff, diff } from "@blazediff/core-wasm";
 
await initBlazediff(); // loads the sibling .wasm; call once
 
const a = await loadRgba("3a.png");
const b = await loadRgba("3b.png");
const output = new Uint8Array(a.width * a.height * 4);
 
const diffCount = await diff(a.data, b.data, a.width, a.height, output);

Custom Threshold

Image 1

Image 2

Result


import { initBlazediff, diff } from "@blazediff/core-wasm";
 
await initBlazediff();
 
const a = await loadRgba("3a.png");
const b = await loadRgba("3b.png");
const output = new Uint8Array(a.width * a.height * 4);
 
const diffCount = await diff(a.data, b.data, a.width, a.height, output, {
  threshold: 0.5,
});

Diff Mask

Image 1

Image 2

Result


import { initBlazediff, diff } from "@blazediff/core-wasm";
 
await initBlazediff();
 
const a = await loadRgba("3a.png");
const b = await loadRgba("3b.png");
const output = new Uint8Array(a.width * a.height * 4);
 
// diffMask renders changes on a transparent background instead of grayscale
const diffCount = await diff(a.data, b.data, a.width, a.height, output, {
  diffMask: true,
});

Loading the .wasm from a CDN, a bundler, or the filesystem? initBlazediff accepts a URL, Response, or raw bytes - see the full API reference →.