Image Comparison

Learn how to use BlazeDiff for different types of comparisons - binary, object, and pixel-by-pixel image comparison.

Installation


npm install @blazediff/core


pnpm add @blazediff/core


yarn add @blazediff/core


bun add @blazediff/core

Overview

BlazeDiff provides multiple comparison methods optimized for different use cases. Try the interactive demos below to see each method in action.

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/packages/benchmark/fixtures/blazediff/3a.png"
);
const img2 = await loadImage(
  "https://raw.githubusercontent.com/teimurjan/blazediff/refs/heads/main/packages/benchmark/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/packages/benchmark/fixtures/blazediff/3a.png"
);
const img2 = await loadImage(
  "https://raw.githubusercontent.com/teimurjan/blazediff/refs/heads/main/packages/benchmark/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/packages/benchmark/fixtures/blazediff/3a.png"
);
const img2 = await loadImage(
  "https://raw.githubusercontent.com/teimurjan/blazediff/refs/heads/main/packages/benchmark/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],
});