I have currently been trying to hash an image from my browser using javascript. However, I've been hashing a string of the dataURL or the pixel data that I've been retrieving from the canvas element in HTML. This is obviously not the same as hashing the raw data of the image which is what I would like to do.

For example the data that would be used for the same image in the php hash file function.

Does anybody know how I can access this raw image data using javascript to get a hash value that would be equivalent to the result hash I get from PHP hash_file($file)?

Thanks!

I have currently been trying to hash an image from my browser using javascript. However, I've been hashing a string of the dataURL or the pixel data that I've been retrieving from the canvas element in HTML. This is obviously not the same as hashing the raw data of the image which is what I would like to do.

For example the data that would be used for the same image in the php hash file function.

Does anybody know how I can access this raw image data using javascript to get a hash value that would be equivalent to the result hash I get from PHP hash_file($file)?

Thanks!

• javascript
• html
• image
• hash

• How is "raw data of the image" not the "pixel data"? Of course, image data is no file. – Bergi Commented Mar 4, 2013 at 18:43
• The raw data I'm looking for is 0 and 1's where as the pixel data is a string of numbers consisting of numbers from 0-255 (if I'm not mistaken on the range). I'm suspecting the function in PHP is working with the 0 and 1's, not the 0-255 values concatenated together. – roman canada Commented Mar 4, 2013 at 18:45
• What do you mean "string of numbers"? Do you have a string containing binary data or an array of bytes? – GJK Commented Mar 4, 2013 at 18:46
• 0-255 is only 8 times 0s and 1s. – Bergi Commented Mar 4, 2013 at 18:47
• Right, is that to say that what the binary data representing the image is also made of? I was under the impression the bytes of the file/image weren't exactly in relation with the pixels. Otherwise characters could also be representations of pixels and I guess I just hadn't seen that. – roman canada Commented Mar 4, 2013 at 18:50

1 Answer 1

You can get the raw data of an image with an XHR request to that image file location.

var xhr = new XMLHttpRequest();
xhr.open('GET', '/my/image/file.png', true);
xhr.responseType = 'arraybuffer'; // this will accept the response as an ArrayBuffer
xhr.onload = function(buffer) {
    var words = new Uint32Array(buffer),
        hex = '';
    for (var i = 0; i < words.length; i++) {
      hex += words.get(i).toString(16);  // this will convert it to a 4byte hex string
    }
    console.log(hex);
};
xhr.send();

After that, you can use whatever hashing algorithm you'd like. Here's a library of them: https://code.google./p/crypto-js/