编写Google浏览器插件时 js中利用canvas对本地图片进行处理时遇到跨域问题，无法getImageData()

Question

编写插件时，利用canvas将本地图片先进行处理制作一个素材库。然后获取网页图片与素材库进行比较。 实际中drawImage(im,0,0)后无法getImageData(),原因是im是本地图片（js所在文件夹下的文件）.请问如何才能用canvas操作本地图片呢
`var im = new Image(),

        //im.crossOrigin = null;
        //im.crossOrigin = "Anonymous";
        canvas = document.createElement("canvas"),
        ctx = canvas.getContext("2d");
        im.onload = function(){
            canvas.width = this.width;
            canvas.height = this.height;
            ctx.drawImage(im,0,0);
            var imgData = ctx.getImageData(0,0,80,20);
            imgData = binaryzationImageData(imgData);
            ctx.putImageData(imgData,0,0);
            for(var i=1;i<=4;i++){
                (function(i){
                    var imgData = ctx.getImageData(offsetX+gap*(i-1)+fontWidth*(i-1),offsetY,fontWidth,fontHeight);
                    !source[numArr[i-1]] && (source[numArr[i-1]] = imgData.data.join("").replace(/255/g,"1"));
                })(i);
            }
        }
        im.src = pic;`

Answer 1

确实如zollero所说，要放在一个服务器环境中运行，直接拖到浏览器里面运行html是不行的