canvas里调用getImageData的报security的问题

canvas元素支持绘制任意图片元素：

var ctx = document.getElementById("canvas").getContext("2d");
if (ctx){
    var img = new Image();

    img.src = img_url;
    img.onload = function(){
        ctx.drawImage(img, 0, 0, 640, 480);
    }

}

我们还可以通过context的getImageData方法获取图像每个像素的数据，但是如果你的img_url和你的页面不是同源的，那么getImageData会导致错误，比如：

var ctx = document.getElementById("canvas").getContext("2d");
if (ctx){
    var img = new Image();
    img.onload = function(){

        try {

            ctx.drawImage(img, 0, 0, 640, 480);

            var originImageData = ctx.getImageData(0, 0, 640, 480);

        }

        catch (e) {alert(e.message)}      
    }
    img.src = img_url;
}

我们增加了try/catch来捕获异常，在Chrome下你会得到这个错误：SECURITY_ERR: DOM Exception 18，而在Firefox下为：Security error。

 

解决办法：

　　1、使用tomcat或其他web服务器.在服务器中运行.

　　2、修改浏览器配置(不推荐)

　　Firefox：在地址栏输入about:config，然后设置security.fileuri.strict_origin_policy为false。

　　Chrome：在命令行中运行 /path-to-chrome/chrome.exe –allow-file-access-from-files。