Hashing an Image in Javascript

Question

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!

How is "raw data of the image" not the "pixel data"? Of course, image data is no file. — Bergi
– 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
– 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
– GJK, Commented Mar 4, 2013 at 18:46
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
– roman canada, Commented Mar 4, 2013 at 18:50

MattDiamant · Accepted Answer · 2013-03-04 18:45:40Z

6

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.com/p/crypto-js/

answered Mar 4, 2013 at 18:45

MattDiamant

8,8394 gold badges39 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

roman canada Over a year ago

Ah, this response serves the purpose but for security purposes I'm hoping to have everything done client side, independent of any server and working only with the image element in browser.

MattDiamant Over a year ago

You're already grabbing the image file from a server, right? This is just grabbing it again. Where are you loading the image from that you can't load it again? Otherwise, what's wrong with the canvas+dataURL solution that you've probably come across?

roman canada Over a year ago

I am, the problem with this is just added security. For example if I'm looking to digitally sign this image, the byte data I'm relying on the server to correctly send back to me is susceptible to alterations( assuming http, no ssl). I'd like to be signing the image that I see, to be truly signing what I see. EDIT: However, if this can also reload the image in browser according to the data I receive, then that would actually work.

roman canada Over a year ago

The problem with dataURL is that cross browser, the dataURL's are inconsistent.

roman canada Over a year ago

Well after my last comment, I realize now your solution will probably be the only correct one... guess I'll have to work around the small security drawback.

Collectives™ on Stack Overflow

Hashing an Image in Javascript

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related