Question

I am trying to use the technique shown here: http://joelb.me/blog/2011/code-snippet-accessing-clipboard-images-with-javascript/ to capture an image the user pastes onto the webpage. This is compatible with Chrome and Firefox.

Everything works well. The image data is supposed to be stored in pastedImage.src. I am able to display the image on the page (into an img element, or draw it on a canvas).

However, what gets stored in pastedImage.src differs in Chrome and Firefox. Firefox stores the actual image, in a base64 encoded data URL, which I can parse and upload; Chrome stores a temp URL in the form http://[domain]/%5Bstring%5D that does point to the image. Please see this here: http://test.vapenerd.com/paste.html

I can’t really figure out how to get the actual image data from that – I tried to a FileReader() on it, but it doesn’t seem to work.

Right now my workaround is to draw the image into a canvas and then get it using the toDataURL() method which returns a base64 encoded data URL.

I am sorry, I am not a web developer, hope this is not too confusing.

Thanks.

Answer 1

Just read it as a data uri

var reader = new FileReader();
reader.onload = function(event){
    createImage(event.target.result);
}; // data url!
reader.readAsDataURL(blob);

DEMO