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

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.