How to convert an image object to a binary blob

javascript image html blob exif
user1823085 picture user1823085 · Nov 14, 2012 · Viewed 33.8k times · Source

Is it possible to parse an image object (<img>) in the DOM as if it had been uploaded and opened with FileReader? I am trying to use jpegmeta.js to extract EXIF metadata from JPEGs, but it needs binary strings which are returned by the FileReader.

It might be possible to use XHR to load the image from its URL and parse it with FileReader. However, this would incur a lot of overhead if every image has to be downloaded twice. Another option could have been to use the canvas, but that loses the exif data when converting.

Answer

Alex Ghiculescu picture Alex Ghiculescu · Dec 28, 2012

The general consensus seems to be summed up in this answer: Get image data in JavaScript?

So if you need the exif data, you'll need to use the XHR technique. Hopefully the browser will have the image cached, so it won't be too much of a performance hit. Otherwise the canvas technique should do the job.

Related questions

Programmatically change the src of an img tag

How can I change the src attribute of an img tag using javascript? <img src="../template/edit.png" name=edit-save/> at first I have a default src which is "../template/edit.png" and I wanted to change it …

Read More
execute function after complete page load

I am using following code to execute some statements after page load. <script type="text/javascript"> window.onload = function () { newInvite(); document.ag.src="b.jpg"; } </script> But this code does not work properly. The function is …

Read More
Render HTML to an image

Is there a way to render html to image like PNG? I know that it is possible with canvas but I would like to render standard html element like div for example.

Read More