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

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.

时间: 2024-08-07 21:19:27

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

Ajax跨域、Json跨域、Socket跨域和Canvas跨域等同源策略限制的解决方法

同源是指同样的协议.域名.port,三者都同样才属于同域.不符合上述定义的请求,则称为跨域. 相信每一个开发者都曾遇到过跨域请求的情况,尽管情况不一样,但问题的本质都能够归为浏览器出于安全考虑下的同源策略的限制. 跨域的情形有非常多,最常见的有Ajax跨域.Socket跨域和Canvas跨域.以下列举一些我们常见的跨域情形下.某些浏览器控制台给出的错误提示: FireFox下的提示: 已阻止交叉源请求:同源策略不同意读取***上的远程资源.能够将资源移动到同样的域名上或者启用 CORS 来解决问

mysql启动时报错:Starting MySQL... ERROR! The server quit without updating PID file (/opt/mysql/data/mysql.pid) 的解决方法

出现问题的可能性 1.可能是/opt/mysql/data/数据目录mysql用户没有权限(修改数据目录的权限) 解决方法 :给予权限,执行  "chown -R mysql.mysql /opt/mysql/data"  然后重新启动mysqld 2.可能进程里已经存在mysql进程 解决方法:用命令“ps -ef|grep mysqld”查看是否有mysqld进程,如果有使用“kill -9  进程号”杀死,然后重新启动mysqld! 3.可能是第二次在机器上安装mysql,有残余

IE下使用excanvas.js之后动态创建的canvas不支持getContext的解决方法(转)

IE下使用excanvas.js之后动态创建的canvas不支持getContext的解决方法(转) IE下使用excanvas.js之后,动态创建的canvas不支持getContext的解决方法 引入excanvas.js以后,在ie下,文档中的canvas就可以用了,但是如果是通过createElement方法创建的就不行了 var canvas=document.createElement(”canvas”); if(canvas.getContext){ alert(”support

canvas生成图片toDataURL报错的原因和解决方法

现象:在使用canvas的toDataURL()方法时,控制台有时会报错:Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. 原因:这是由于之前由drawImage()向canvas导入的图片跨域而导致的. 解决方法: 1.在引用图片之前打开跨域资源允许权限(一定要注意顺序): 1 var img=new Image;

canvas.toDataURL 由于跨域报错的解决方法

关于canvas.toDataURL 由于跨域报错的解决方法 用过canvas,都知道toDataURL这个方法真好用,不仅合成图片用到它,压缩图片也用到它.但有一个问题,就是图片源不能跨域,不然会报错: Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. 解决方法,相信大家都知道了,就是在图片img加上crossOri

用bootstrap兼容ie各大浏览器的解决方法

以bootstrap为框架常常会出现不兼容ie各大浏览器的问题,用以下代码基本可以解决,一般在<head></head>加入以下代码后,网页可能还一些比较不美观,再写一点css hack就可以了,如果加入以下代码网页还是特别乱,请检查一下你的css和js的文件顺序,有加载顺序的... <!--[if lte IE 6]> <link rel="stylesheet" type="text/css" href="st

Android实际开发中的bug总结与解决方法(一)

                                                                             Android实际开发中的bug总结与解决方法(一) Android开发中有很多bug,我们是完全可以在线下避免的,不要等到线上报的BUG的再去修复.下面是我在实际开发中遇到过的bug和解决方法. BUG 1: java.lang.RuntimeException: Unable to start activity ComponentInfo

jquery mobile使用过程中遇到的一些问题及解决方法

最近在项目在综合考虑了可能维护性和应用本身的复杂性,采用了HTML5 + JQuery Mobile的文案. 记录一下遇到的两个问题. 1)为了在手机上运行的更快,canvas中底图决定调用 putImageData 来复制,但在android 2.3系统上,canvas 的 putImageData 有很严重的锯齿,canvas.translate(0.5, 0.5)也是没有效果.如下图,前面是正常画出的底图,后面是 putImageData 后的底图. 解决办法, if (android 2

【转】“正由另一进程使用,因此该进程无法访问该文件”的问题&amp;解决方法

正在写一个手指画图的程序C# + WPF其中有一部分是加载外部某PNG文件,放入BitmapImage,再作为Image的Source显示在Canvas上画了几笔之后,再存回这个PNG文件================问题=================BitmapImage这个对象没有Dispose方法,始终无法释放,因此在之后FileStream试图写这个文件时出现"正由另一进程使用,因此该进程无法访问该文件"的问题BitmapImage bitmap = new Bitmap