Why does canvas.toDataURL() throw a security excep

Question

Did I not get enough sleep or what? This following code

var frame=document.getElementById("viewer");
frame.width=100;
frame.height=100;

var ctx=frame.getContext("2d");
var img=new Image();
img.src="http://www.ansearch.com/images/interface/item/small/image.png"

img.onload=function() {
    // draw image
    ctx.drawImage(img, 0, 0)

    // Here's where the error happens:
    window.open(frame.toDataURL("image/png"));
}

is throwing this error:

SECURITY_ERR: DOM Exception 18

There's no way this shouldn't work! Can anyone explain this, please?

Answer 1

If you are simply drawing some images on a canvas, make sure you are loading the images from the same domain.

www.example.com is different to example.com

So make sure your images and the url you have in your address bar are the same, www or not.

Answer 2

Setting cross origin attribute on the image objects worked for me (i was using fabricjs)

    var c = document.createElement("img");
    c.onload=function(){
        // add the image to canvas or whatnot
        c=c.onload=null
    };
    c.setAttribute('crossOrigin','anonymous');
    c.src='http://google.com/cat.png';

For those using fabricjs, here's how to patch Image.fromUrl

// patch fabric for cross domain image jazz
fabric.Image.fromURL=function(d,f,e){
    var c=fabric.document.createElement("img");
    c.onload=function(){
        if(f){f(new fabric.Image(c,e))}
        c=c.onload=null
    };
    c.setAttribute('crossOrigin','anonymous');
    c.src=d;
};

Answer 3

In the specs it says:

Whenever the toDataURL() method of a canvas element whose origin-clean flag is set to false is called, the method must raise a SECURITY_ERR exception.

If the image is coming from another server I don't think you can use toDataURL()

Answer 4

If the image is hosted on a host that sets either of Access-Control-Allow-Origin or Access-Control-Allow-Credentials, you can use Cross Origin Resource Sharing (CORS). See here (the crossorigin attribute) for more details.

Your other option is for your server to have an endpoint that fetches and serves an image. (eg. http://your_host/endpoint?url=URL) The downside of that approach being latency and theoretically unnecessary fetching.

If there are more alternate solutions, I'd be interested in hearing about them.