码迷,mamicode.com
首页 > 其他好文 > 详细

解决方法!:getImageData on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

时间:2015-05-04 22:10:40      阅读:146      评论:0      收藏:0      [点我收藏+]

标签:html5   域名   chrome   

Uncaught SecurityError: Failed to execute ‘getImageData‘ on ‘CanvasRenderingContext2D‘: The canvas has been tainted by cross-origin data. 

最近在自学html5 CSS3很推荐李刚的 这个书<html5、css3,js权威指南>,今天在家里测试发现 canvas中的getImageData报错

Failed to execute ‘getImageData‘ on ‘CanvasRenderingContext2D‘  ,因为以前出现过一次chrome 跨域访问json不了的问题,所以我知道是浏览器的配置问题 --allow-file-access-from-files就可以了,发现网上没有答案,于是我就想为什么我公司的可以,我每次公司用chrome都会出现一个提示浏览器安全性能低的提示,我就知道了,因为公司将安全性能降到最低,所以不会出现json跨域和getImageData的问题,于是我打开浏览器,果然问题这就这里

解决方法1: --disable-web-security,我们在目标中添加上这一句就可以了记得中间有一个空格,然后关上浏览器,重新手动打开输入地址,(我的是本地文件html直接拖放进入,不要使用dw快捷F12打开,第一次无效,我也不知道为什么)问题解决 (具体可参照图片附1),同时附上问题的原因: 

1. 首先没有服务器环境(如:本地的 html网页,操作本地的图片),
    就会报"Unable to get image data from canvas because the canvas has been tainted by cross-origin data"错误。
    因为本地测试用的图片是文件夹内的,js跨域限制是不能获取非同一域名下的数据的,
    而本地的位置是没有域名的,所以浏览器都认为你是跨域,导致报错。
2. 为了阻止欺骗,浏览器会追踪 image data。
   当把一个canvas的域不同图片放到canvas上,这个canvas就成为 “tainted”(被污染的),浏览器就不让你操作该canvas 的任何像素。
   是为了阻止多种类型的XSS/CSRF攻击(两种典型的跨站攻击)。

解决方法2:

将图片转换成为字符串保存在浏览器,使用时再转换回去有兴趣参考

http://blog.csdn.net/molaifeng/article/details/42293509

图片:附1

 技术分享

解决方法!:getImageData on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

标签:html5   域名   chrome   

原文地址:http://blog.csdn.net/w5167839/article/details/45485645

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!