是否可以避免“操作不安全”当使用Canvas？ [英] Is it possible to avoid "The operation is insecure" when using Canvas?

问题描述

我有一个HTML画布（使用KineticJS，但是画布爱好者应该仍然钟声），从另一个域加载图像，将其放置在画布上，并覆盖一些其他信息，以产生最终的图像。当我尝试使用canvas.toDataURL（）输出文件时，我收到消息操作不安全。，显然是由于跨域限制。

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.

有没有任何想法？

推荐答案

如果您有权限配置您自己的服务器，您可以启用cross - 通过设置此标题（更多关于服务器安全性的操作）执行-origin共享：

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> | *

或者，如果您在支持CORS的网站（如www.dropbox.com）上托管您的图片， fetch image没有安全错误，像这样：

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";

这篇关于是否可以避免“操作不安全”当使用Canvas？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！