Browser image hash

This is browser image hash generator.

This library is made to generate the same hash as image-hash as much as possible.

Supported

• difference hashing (dHash)
• average hashing (aHash)
• perception hashing (pHash)
• wavelet hashing (wHash)

Installation

$ npm install browser-image-hash

Basic Usage

import {DifferenceHashBuilder, Hash} from 'browser-image-hash';

document.addEventListener('DOMContentLoaded', async () => {
  const builder = new DifferenceHashBuilder();
  const targetURL = new URL('./example.jpg', window.location.href);
  const destHash = await builder.build(targetURL);
  const srcHash = new Hash('0111011001110000011110010101101100110011000100110101101000111000');

  if (srcHash.getHammingDistance(destHash) <= 10) {
     console.log('Resembles');
     return;
  }

  console.log('Different');
});

Other Hash Algorithms

import {
  AverageHashBuilder,
  PerceptualHashBuilder,
  WaveletHashBuilder,
} from 'browser-image-hash';

const url = new URL('./example.jpg', window.location.href);

// Average Hash
const aHash = await new AverageHashBuilder().build(url);

// Perceptual Hash
const pHash = await new PerceptualHashBuilder().build(url);

// Wavelet Hash
const wHash = await new WaveletHashBuilder().build(url);

Type-safe Hash Comparison

Each builder returns a branded hash type (DHash, AHash, PHash, WHash). getHammingDistance only accepts the same hash type at compile time.

import type { DHash, AHash } from 'browser-image-hash';

const d1: DHash = await new DifferenceHashBuilder().build(url1);
const d2: DHash = await new DifferenceHashBuilder().build(url2);
const a1: AHash = await new AverageHashBuilder().build(url1);

d1.getHammingDistance(d2); // OK
d1.getHammingDistance(a1); // Compile error

Warning

Since this library uses canvas, please be careful of the same origin policy.

Allowing cross-origin use of images and canvas