How to read loaded image into a blob? [duplicate]

Question

Possible Duplicate:
How to convert an image object to a binary blob

I am facing same-origin policy restrictions when loading remote images. However DOM 0 Image object can be used to load a remote resource (this is essentially the same as creating an <img /> tag).

var fr = new FileReader(),
    img = new Image();

img.src = 'http://distilleryimage8.s3.amazonaws.com/6cf25568491a11e2af8422000a9e28e9_7.jpg';

img.onload = function () {
    // how to get this image as a Blob object?
};

Is there a way to read this resource into a Blob/arraybuffer object? This is not a duplicate of How to convert an image object to a binary blob as the latter does not rise with same-origin issues.

Answer 1

In my opinion it can be accomplished without much pain...

You just need one more HTML5 element. When using canvas you can draw the remote image on it. After that getting the image dataUrl is quite easy, you have such function from the canvas's API. The next step is to use FileReader's readAsDataURL method.

I haven't tried it but theoretically it should work.

• Edit: It won't work. If the image is from different origin you can't use canvas's toDataURL method. So I don't think there's any solution without server-side.