通过ajax将图像加载到画布中

Question

It relates to another question Cross Origin Resource Sharing Headers not working only for safari .

I am trying to load an image into canvas from s3. Seems safari < 6.0 has a bug related to loading images via CORS. So the canvas get tainted though the image has cors enabled. So I was thinking if there is some way to make an ajax request and then load the response into a canvas ?

Note : Ajax request works properly with CORS. Just that while loading image safari doesn't respect the crossOrigin attribute and hence the request is made without cross-origin.

• I have my images at s3 so there is no way to encode it to base64 and get it from amazon directly
• I am preferring not to set up a proxy at my domain for the image

some javascript

var img_location = "//temp_upload_test.s3.amazonaws.com/IMG_0222.JPG"
var img = new Image();

img.onload = function(){

    console.log("image loaded")
    EXIF.getData(img,function(){
        console.log("image data read");
        var orientation = EXIF.getTag(img,'Orientation');
        console.log("orientation"+orientation);
        load_image_into_canvas_with_orientation(img,orientation);
    })
    console.log("image loaded function complete");
}
img.crossOrigin = "anonymous";
$(img).attr("crossOrigin","anonymous");
img.src = img_location;

One way I am trying to approach the problem is make an xhr request to s3. get the image as BinaryFile and then decode it to base64 and use it as img's src . But while decoding I get a DOM exception not sure if the idea itself is wrong

Answer 1

img.crossOrigin = "anonymous";

It does not works in all cases because of security issue.

You can load any image in canvas by converting that image to base64 string and then bind to canvas.

Example:

<img src="www.example.com/name.png" alt="test" />

to

<img src="data:image/png;base64,vnaXYZetc..." alt="test" /> 

then load it to in canvas.

Thank you.