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

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是不行的