1

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?

4

1 回答 1

2

如果图像来自您无法控制的域，那么您将受到 CORS 限制。

如果您有权配置自己的服务器，则可以通过设置此标题来启用跨域共享（在执行此操作时阅读有关服务器安全的更多信息）：

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

或者，如果您将图像托管在启用了 CORS 的网站（例如 www.dropbox.com）上，则可以获取图像而不会出现如下安全错误：

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";
于 2013-07-21T15:50:16.317 回答