PDQ WASM - Browser Example

This example demonstrates how to use the PDQ perceptual hashing algorithm in the browser using WebAssembly.

Upload one or two images to generate their PDQ hashes and compare them.

Image 1

Image 2

Comparison

Compare Images

How it works

1. The PDQ WASM module is loaded automatically when the page loads
2. When you upload an image, it's decoded using the Canvas API
3. The raw pixel data is passed to the PDQ algorithm
4. A 256-bit perceptual hash is generated
5. Two hashes can be compared using Hamming distance

Hamming Distance: The number of bits that differ between two hashes (0-256). Lower values indicate more similar images.

Similarity: Percentage similarity based on the Hamming distance (100% - (distance/256 * 100)).