Is it possible to avoid “The operation is insecure” when using Canvas?

问题

I have a HTML canvas (using KineticJS, however canvas aficionados should still chime in) that loads an image from another domain, places it onto the canvas and overlays some other information to product a final image. When I try to use canvas.toDataURL () to output the file, I receive the message "The operation is insecure.", obviously due to cross-domain restrictions.

I was wondering if anyone knows of any methods to work around this error (preferably cross-browser compatible). I was thinking a solution would be to copy the canvas to another canvas, kind of like a screenshot, but I can't find any method of doing so in the way that would avoid the error as I think it copies all canvas properties along with it.

Does anyone have any ideas?

回答1:

If the images are coming from a domain you don't control, then you're stuck with CORS limitations.

If you have access to configuring your own server, you can enable cross-origin sharing by setting this heading (read more about server security when doing this):

Access-Control-Allow-Origin: <origin> | *

Alternatively, if you host your images on a CORS enabled site like www.dropbox.com you can fetch images without the security errors like this:

var image1=new Image();
image1.onload=function(){
    context.drawImage(image1,0,0);
}
image1.crossOrigin="anonymous";
image1.src="https://dl.dropboxusercontent.com/u/99999999/yourCORSenabledPic.jpg";

来源：https://stackoverflow.com/questions/17771882/is-it-possible-to-avoid-the-operation-is-insecure-when-using-canvas