0.3.0 • Published 3 years ago

phash-js v0.3.0

Weekly downloads
9
License
MIT
Repository
-
Last release
3 years ago

pHash Build Status

pHash provides perceptual hashing and visual comparison of images in the browser without using HTML canvas.

Demo

Usage

<!DOCTYPE html>
<html>
  <head>
    ...
  </head>
  <body>
    <input id="input" type="file" accept="image/*" />
    ...

    <script src="https://cdn.jsdelivr.net/npm/phash-js/dist/phash.js"></script>
    <script>
      const input = document.getElementById('input')
      input.onchange = function (event) {
        pHash.hash(event.target.files[0]).then(hash => {
          console.log(hash.value) // 1011010111010110010100100000101100101011001011110011110111110111
        })
      }
    </script>
  </body>
</html>

API

hash(image)

pHash.hash(image).then(hash => {
  console.log(hash.toBinary()) // 1011010111010110010100100000101100101011001011110011110111110111
  console.log(hash.toHex()) // b5d6520b2b2f4000
  console.log(hash.toInt()) // 13102750373803672000
})

compare(image1, image2)

pHash.compare(image1, image2).then(distance => {
  console.log(distance) // 3
})

Why?

If you try to generate an image hash using the HTML Canvas will notice that it changes depending on the browser and environment. This happens for several reasons. At the image format level – web browsers use different image processing engines, image export options, compression level, the final images may get different checksum even if they are pixel-identical. At the system level – operating systems have different fonts, they use different algorithms and settings for anti-aliasing and sub-pixel rendering. On this basis, for example, the technique Canvas Fingerprinting works.

Caveats

This tool requires the WASM version of ImageMagick to be downloaded to the client, which is more than 4Mb.

Contribute

If you find a bug or want to contribute to the code or documentation, you can help by submitting an issue or a pull request.

License

MIT