canvas关于getImageData跨域问题解决方法
Posted 世界之魂
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了canvas关于getImageData跨域问题解决方法相关的知识,希望对你有一定的参考价值。
一、问题:在使用html5的canvas是,当用到getImageData方法获取图片信息时,会碰到跨域无法获取的情况,代码如下:
document.getElementById("pic").onload=function(){ var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var img=document.getElementById("pic"); ctx.drawImage(img,0,0,300,300); var imgData=ctx.getImageData(0,0,c.width,c.height); //问题所在 // 反转颜色 for (var i=0;i<imgData.data.length;i+=4) { imgData.data[i]=255-imgData.data[i]; imgData.data[i+1]=255-imgData.data[i+1]; imgData.data[i+2]=255-imgData.data[i+2]; imgData.data[i+3]=255; } ctx.putImageData(imgData,0,0); };
在chrome会提示:
"Uncaught DOMException: Failed to execute \'getImageData\' on \'CanvasRenderingContext2D\': The canvas has been tainted by cross-origin data.
at HTMLImageElement.document.getElementById.onload"的错误信息
在IE中会提示:
"security error!"的错误信息
二、原因:图片存储在本地时,是默认没有域名的,用getImageData方法时,浏览器会判定为跨域而报错!
三、方法:1.把图片放置在服务器中,通过服务器返回给客户端,遵循同源策略;
2.用firefox浏览器打开;
在firefox中效果如下:
以上是关于canvas关于getImageData跨域问题解决方法的主要内容,如果未能解决你的问题,请参考以下文章
safari 和 ios 在做canvas.toDataUrl 时报错怎么处理