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跨域问题解决方法

最新文章

热门文章