解决方法!:getImageData on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.
2015-05-04 20:54
846 查看
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
解决方法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:
将图片转换成为字符串保存在浏览器,使用时再转换回去有兴趣参考
/article/3625946.html
最近在自学html5 CSS3很推荐李刚的 这个书<html5、css3,js权威指南>,今天在家里测试发现 canvas中的getImageData报错
Failed to execute 'getImageData' on 'CanvasRenderingContext2D' ,因为以前出现过一次chrome 跨域访问json不了的问题,所以我知道是浏览器的配置问题 --allow-file-access-from-files就可以了,发现网上没有答案,于是我就想为什么我公司的可以,我每次公司用chrome都会出现一个提示浏览器安全性能低的提示,我就知道了,因为公司将安全性能降到最低,所以不会出现json跨域和getImageData的
问题,于是我打开浏览器,果然问题这就这里
图片:附1
解决方法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:
将图片转换成为字符串保存在浏览器,使用时再转换回去有兴趣参考
/article/3625946.html
相关文章推荐
- "Unable to get image data from canvas because the canvas has been tainted by cross-origin data"问题产生原因及解决办法
- "Unable to get image data from canvas because the canvas has been tainted by cross-origin data"问题产生原
- 关于Canvas中的"The canvas has been tainted by cross-origin data"跨域问题
- android Failed to install *.apk on device 'emulator-5554' timeout 或者 the user data image is used解决办法
- The entry '**' has already been added错误的解决方法
- 安装mac系统时提示:The cpu has been disabled by the guest operating system解决方法
- Eclipse build error 解决方法The library '*.jar' contains native libraries that will not run on the dev
- 解决Android中的ERROR: the user data image is used by another emulator. aborting的方法
- adb上使用cp命令的替代方法(failed on '***' - Cross-device link解决方法)
- ERROR: Dll 'AppName[UID].APP' has initialised data 解决方法
- the sourcesafe database has been locked by the administrator之解决方法(downmoon)
- the sourcesafe database has been locked by the administrator之解决方法(downmoon)
- the sourcesafe database has been locked by the administrator之解决方法
- error C2787: 'IxxxxObject' no GUID has been associated with thisobject解决方法
- The cpu has been disabled by the guest operating system解决方法
- 错误:A field or property with the name 'XXX' was not found on the selected data source 解决
- Source insight上修改samba共享ubuntu上内核源程序文件出现"Confirm by typing ‘yes' below"、"has been changed outside of the editor. Do you want to
- ERROR: the user data image is used by another emulator. aborting 解决方法
- ERROR: the user data image is used by another emulator. aborting错误解决方法
- File `Makefile' has modification time 1.8e+06 s in the future这种警告的原因分析及解决方法