我的代码在本地主机上运行得很好,但在网站上却不起作用。
我从控制台收到此错误,对于这一行.getImageData(x,y,1,1).data
:
Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.
我的代码的一部分:
jQuery.Event.prototype.rgb=function(){
var x = this.offsetX || (this.pageX - $(this.target).offset().left),y = this.offsetY || (this.pageY - $(this.target).offset().top);
if (this.target.nodeName!=="CANVAS")return null;
return this.target.getContext('2d').getImageData(x,y,1,1).data;
}
Note:我的图像 url (src) 来自子域 url
正如其他人所说,您通过从跨源域加载来“污染”画布。
https://developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image https://developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image
但是,您可以通过简单地设置来防止这种情况:
img.crossOrigin = "Anonymous";
仅当远程服务器正确设置以下标头时,这才有效:
Access-Control-Allow-Origin "*"
The Dropbox 文件选择器 https://www.dropbox.com/developers/dropins/chooser/js使用“直接链接”选项就是一个很好的例子。我用它oddprints.com http://www.oddprints.com/将远程保管箱图像网址中的图像吸到我的画布中,然后将图像数据提交回我的服务器。全部用 JavaScript 编写
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)