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。

你可能感兴趣的:(html5)