load an image via ajax into canvas

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

Couldn't it help us help you if you provided your code? So we can at least exactly how you're handling it now — Ian, Dec 21 '12 at 06:56
what part of code are you looking for ? the way I load the image from s3 ? — Gaurav Shah, Dec 21 '12 at 06:57
I would think to do it like: `var base_image = new Image(); base_image.src = 'URL_TO_YOUR_S3_FILE'; base_image.onload = function () { var context = canvas.getContext('2d'); context.drawImage(base_image, 100, 100); };` but I really don't work with canvas — Ian, Dec 21 '12 at 06:58
@lan after what you told try `canvas.toDataUrl()` and it will throw DOM exception http://stackoverflow.com/questions/9299120/security-err-dom-exception-18-only-in-safari — Gaurav Shah, Dec 21 '12 at 07:05
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/21502/discussion-between-gaurav-shah-and-ian) — Gaurav Shah, Dec 21 '12 at 07:25
Hmm interesting. Had no idea there would be cross-domain problems with this but I guess that makes sense. No idea why Safari wouldn't work (and obviously how to fix it though) — Ian, Dec 21 '12 at 07:25

score 0 · Answer 1 · answered May 16 '16 at 10:52

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.

load an image via ajax into canvas

1 Answers1