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