Visualizer for perceptual image hash

phash_visualizer.js

var phash_visualizer = function(canvasElm, hexHash) {
  var hash = hex2Bin(hexHash)
  var hashLength = Math.sqrt(hexHash.length) * 2
  canvasElm.width = hashLength
  canvasElm.height = hashLength
  canvasElm.style.imageRendering = 'pixelated'
  $ctx = canvasElm.getContext('2d');
  for (var col = 0; col < hashLength; col++) {
    for (var row = 0; row < hashLength; row++) {
      var px = hash[col + row * hashLength];
      if (px === '1') px = [200, 200, 200]
      else if (px === '0') px = [50, 50, 50]
      else px = [200, 50, 50]
      $ctx.fillStyle = 'rgb(' + px[0] + ',' + px[1] + ',' + px[2] + ')';
      $ctx.fillRect(col, row, 1, 1);
    }
  }
  function hex2Bin(text) {
    return text.split('').reduce(function(result, chr) { return result + hex2BinChar(chr) }, '')
  }
  function hex2BinChar(chr) {
    chr = parseInt(chr, 16).toString(2)
    while(chr.length < 4) chr = '0' + chr
    return chr
  }
}

// Example: phash_visualizer(document.getElementById('canvasID'), '3329213b330d9c98')
// Example: phash_visualizer(document.getElementById('canvasID'), '0f1f0e070dc70dc70d470f070f870f8f0f0f5f8f4c9321e0c1f0c1e0f3e0dbd0')
// Example: phash_visualizer(document.getElementById('canvasID'), '01ff83ff01fe00ff21fc007f00f8007f00f9e03f00f3f03f00f3f03f40f3f03f00f7f03f00f4201f08fc201f00ffe01f08ffe01f00ffe03f00ffc07f0cffc07f047f00ff047e80ff637ec07f71ff603f30f9813f39c1c70f1f01de039801fc00f803fe00f003fe00e013fc00e073fc00efe7f800efe7f800efe7fb00e7e7f300')
// Example: phash_visualizer(document.getElementById('canvasID'), '87080003ffffffffff00ffffffffffff07080003fffffffff80007ffffffffff82080003ffffffffe00000ffffffffff00000003ffffffff0000003fffffffff00000007fffffffc0000000fffffffff00000007fffffff800000007ffffffff00000007fffffff000000003ffffffff00000007ffffffe000000000ffffffff04000007ffffffc0000000007fffffff0c300007ffffff80000000003fffffff04700007ffffff00000000001fffffff047b0003fffffe00000000000fffffff00730003fffffc000000000007ffffff00210003fffff8000000000007ffffff00010003fffff0000000000003ffffff00000003fffff0000000000003ffffff00000003fffff001f300000001ffffff00000003ffffe007ec00000001ffffff00000003ffffe00ff780000000ffffff00038003ffffc01fffe0000000ffffff00838003ffffc01fffe0000000ffffff00838003ffffc03ffff8000000ffffff00038001ffff803ffff80000007fffff00020001ffff803ffffc0000007fffff00000001ffff803ffffc0000007fffff00000001ffff803ffffc0000007fffff00000001ffff803ffffc0000007fffff02000001ffff803ffffc0000007fffff02000001ffff803ffffc0000007fffff0f040001ffff80fffffe0000007fffff070c0001ffff83ffffff0000007fffff020c0001ffff83ffffff8000007fffff020e0000ffff83ffffff8000007fffff00000000ffff87ffffff8000007fffff00000000ffff8fffffff0000007fffff00000000ffff8fbffffe0000007fffff00000000ffffc7f00072000000dfffff18000000ffffc78000700000000fffff1e3c4000fffc0700007000000007ffff3e386000fffc870000f800000007ffff1e7ce000fffde70000f800000007ffff1e3df000fffdf76000f804000007ffff0000f062fffdf7c2007000000007ffff00004077fffdf780007000000007ffff00000067fffdf79fc0f000000007ffff000000677fffe7ff83f000000007ffff200000007fffc7fffff00000000fffff380000007fffc7fffff80000000fffff7841e0007fffc3fffff00000000fffff78c1c0007fff8bfffff00000001fffff38c1c0007fffcbfffff00000001fffff0000e0007fffc9fffff00000001fffff000000007fffc7fffff00000003fffff000000003ffffdfffff00000007fffff000000003ffffffff7f00000007fffff000000003ffffdffeff0000000ffffff418000003ffffdffcfe0000000ffffffc18018003ffff9ff9800000001ffffffc38038003fffffffb98000000fffffffc3807803ffffffff3fc000000fffffffc1807c03ffffffff7fc800000fffffff0100fc03fffffffe7f8000001fffffff00007c01fffffffcff8000001fffffff00007c00fffffffdff8000001fffffff00007c001fffff79130000003fffffff00003c001fffffbd080000003fffffff00003c000fffffbc000000007fffffff00001c040fffff9c000000007fffffff00001c048fffffdc00000000ffffffff00800e008fffffe078000000ffffffff01e00e001fffffe07e400000ffffffff03f0067c3fffffe07f000000ffffffff07f000fe1ffffff03f000000bfffffff0ff8039f8ffffff01f0000009fffffff1ffc019fcffffff862000000cfffffff0ffc03ffc7fffff438000000cfffffff0ffe01ffe7fffffe39000001c7ffffff07fe009ff7fffffe1f400001c7ffffff07ff00c777fffffa0f000003c3ffffff03ff03c7f7ffffcb07000007c1ffffff03ff8003ffffff1b8380000f80ffffff03ff8003fffff81fe000000f807fffff01ff8201ffffe01df000003f003fffff01ffc00dffff001df800007f001fffff00ffc30ffffc001efe0000ff0007ffff007fc00fffe0001efe0003fe0001ffff007fe01fff80001f7f000ffc00007fff003fe37f7e00001f3f001ffc00001fff001ff7ff6000001f9f007ff8000007ff001ff7ff0000001fce00fff8000001ff800ffffc0000001fc603fff00000007f800fffe00000003fe00ffff00000001fc00fff800000003ff01fffe000000007c007fc000000003ff87fffe000000003e007f0000000003ffeffffc000000000f007e0000000003ff7ffffc000000000ffffc0000000007fffffffe000000000ffff80000000027fffffffe000000000ffff00000000027fffffffc000000000fffe00000004007fffffffc000000000fffc00000008047fffffff8000000000fffc0000001240ffffffff8000000000fff80000000680ffffffff8000000000fff80000001d80ffffffff0000000000fff80000006d08ffffffff0000000000fff80000007f08ffffffff0000000000fff80040637f08fffffffe0000000000fff8060c53ff88ffffeffe0000000000fff03e471bff08ffffcffc0000000000fff0345897fe18ffff9ffc0000000000fff07f5fd7fe18ffffbffc0000000000fff0ffff9ffe11ffef3ff80000000000fff6ffffd7fe11ffcfbff80000000000fff4fffffffe11ffcffff00000000000ffe4fffffffc11ff8ffff00000000000ffeeffffefff11ff9ffff00000000000ffe4ffffe7fe11ff1fffe00000000000ffecfffffffe31ff1fffe00000000000ffdcfffffffc73ff3fffe00000000000fffcfffffffc23fe3fffc00000000000fffcfbfffffc33fe7fffc00010000000fffe7ffffffc23feffffc00000000000fffe7ffffff823ffffff81e000000000fffe7ffffffc23ffffff81fe00000000fffe7ffffffc23ffffff01fe00000000fffe7ffffff823ffffff01fe00000000fffe77fffffc23ffffff003c00000000fffe2ffffff867fffffe000000000000')