Pixel-by-pixel Comparison - Vanilla JavaScript

Compare two images pixel by pixel in pure JavaScript - no native binaries, no WebAssembly. @blazediff/core runs anywhere JS runs (browser, Node, Deno, Bun, edge) and is ~1.5× faster than pixelmatch. Reach for it when you want zero install friction and portability over raw throughput. Need more speed? See 🐆🐆 Rust + WASM and 🐆🐆🐆 Rust + N-API.

Installation


npm install @blazediff/core


pnpm add @blazediff/core


yarn add @blazediff/core


bun add @blazediff/core

Examples

Basic Comparison

Image 1

Image 2

Result


import blazediff from "@blazediff/core";
 
// loadImage can either be a browser function or a server function
const img1 = await loadImage(
  "https://raw.githubusercontent.com/teimurjan/blazediff/refs/heads/main/fixtures/blazediff/3a.png"
);
const img2 = await loadImage(
  "https://raw.githubusercontent.com/teimurjan/blazediff/refs/heads/main/fixtures/blazediff/3b.png"
);
const output = new Uint8Array(img1.width * img1.height * 4);
const width = img1.width;
const height = img1.height;
 
const diff = blazediff(img1, img2, output, width, height);

Custom Threshold

Image 1

Image 2

Result


import blazediff from "@blazediff/core";
 
// loadImage can either be a browser function or a server function
const img1 = await loadImage(
  "https://raw.githubusercontent.com/teimurjan/blazediff/refs/heads/main/fixtures/blazediff/3a.png"
);
const img2 = await loadImage(
  "https://raw.githubusercontent.com/teimurjan/blazediff/refs/heads/main/fixtures/blazediff/3b.png"
);
const output = new Uint8Array(img1.width * img1.height * 4);
const width = img1.width;
const height = img1.height;
 
const diff = blazediff(img1, img2, output, width, height, { threshold: 0.5 });

Custom Colors

Image 1

Image 2

Result


import blazediff from "@blazediff/core";
 
// loadImage can either be a browser function or a server function
const img1 = await loadImage(
  "https://raw.githubusercontent.com/teimurjan/blazediff/refs/heads/main/fixtures/blazediff/3a.png"
);
const img2 = await loadImage(
  "https://raw.githubusercontent.com/teimurjan/blazediff/refs/heads/main/fixtures/blazediff/3b.png"
);
const output = new Uint8Array(img1.width * img1.height * 4);
const width = img1.width;
const height = img1.height;
 
const diff = blazediff(img1, img2, output, width, height, {
  aaColor: [255, 0, 0],
  diffColor: [0, 255, 0],
});

See the full API reference →.