html5 drawImage后getImageData出错解决

在本机测试HTML5 Canvas程序的时候，如果用context.drawImage()后再用context.getImageData()获取图片像素数据的时候会抛出错：SECURITY_ERR: DOM Exception 18，翻译成中文就是说操作不安全，针对这个有两个解决办法（推荐第一种）

我们先看下会出错的源码

ar canvas=document.getElementById('image-content');
var content=canvas.getContext("2d");
var imageWidth=Math.floor(canvas.width*0.8);
var imageHeight=Math.floor(canvas.height*0.8);
var imageStartX=(canvas.width-imageWidth)/2;
var imageStartY=(canvas.height-imageHeight)/2;
var imageUrl='http://pic1.sc.chinaz.com/files/pic/pic9/201301/1/xpic9474.jpg';//出问题的根源
content.clearRect(0,0,canvas.width,canvas.height);
var image=new Image();
image.src=imageUrl;
image.width=imageWidth;
image.height=imageHeight;
image.οnlοad=function(){
    content.drawImage(image,imageStartX,imageStartY,imageWidth,imageHeight);
};
image.οnerrοr=function(){
    alert("图片加载失败！图片地址为："+imageUrl);
};
content.drawImage(image,imageStartX,imageStartY,imageWidth,imageHeight);

var imageData=content.getImageData(imageStartX,imageStartY,imageWidth,imageHeight);//会出问题的地方

运行上面的js浏览器就会报安全错误，其根本原因是imageUrl指向的是一个网络地址，我们只要把这个图片下载下来放到本地就OK了

1、所以第一种解决方法就是把图片下载下来存储在当前html文件所在的目录下的images文件夹，然后修改

var imageUrl='images/one.jpg';

2、修改浏览器配置（不推荐）

Firefox：在地址栏输入about:config，然后设置security.fileuri.strict_origin_policy为false。
Chrome：在命令行中运行 /path-to-chrome/chrome.exe –allow-file-access-from-files。