Why does canvas.toDataURL() throw a security exception?

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.getC         


        

Answer 1

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 2

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 3

Finally i found the solution. Just need add the crossOrigin as third param in fromURL func

fabric.Image.fromURL(imageUrl, function (image) {
            //your logic
    }, { crossOrigin: "Anonymous" });

Answer 4

I'm using fabric.js and could resolve this by using toDatalessJSON instead of toDataURL:

canvas.toDatalessJSON({ format: 'jpeg' }).objects[0].src

Edit: Nevermind. This results in just the background image being exported to JPG, without the drawing on top so it was not entirely useful after all.