在用canvas写颜色取反demo时用到getImageData方法无法获取图片信息。代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
(function(){
    var canvas = document.getElementById("mycanvas");
    var ctx = canvas.getContext("2d");

    var img = new Image();
    img.src = "res/cat1.jpg";
    img.onload = function(){
        ctx.drawImage(img,10,10,300,300);
        var drawing = ctx.getImageData(10,10,300,300);
        console.log(drawing.data);
        for(var i = 0; i < drawing.data.length;i+=4){
             drawing.data[i] = 255 - drawing.data[i];
             drawing.data[i+1] = 255 - drawing.data[i+1];
             drawing.data[i+2] = 255 - drawing.data[i+2];
        };            
        ctx.putImageData(drawing,350,10);
    }    
})();

当在Chrome下预览时控制台报错，错误信息如下Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data. ，而在IE和Edge下就没有这种情况。

经过在网上查阅，错误原因是getImageData（）方法跨域问题。图片文件存储在本地，默认为没有域名，chrome浏览器判断为跨域才报错。（更深层次的原因还待挖掘）

解决方法：把demo放在apache服务器跑就不会报错。

结果图如下：tT6h9.png

注：图片素材来源为知乎网友，侵删。

__END__

Live For Code
文章作者：Live For Code
文章出处：Chrome下getImageData的跨域问题
作者签名：简单地活着, 肆意又精彩.
关于主题：Hexo - Live For Code
版权声明：文章除特别声明外，均采用 BY-NC-SA 许可协议，转载请注明出处