canvas的getImageData引起的浏览器安全错误

/*-----------------------------------------IT EYE 祈祷幸福原创，转载请注明。-----------------------------------------*/

今天用canvas的图片数据获取函数：getImageData

var img = new Image();
img.onload = function(){
	ctx.drawImage(img, 10, 10);
	var imagedata = ctx.getImageData(10, 10, 200, 200);
	ctx.putImageData(imagedata, 10, 220);  //出错的行
}
img.src = 'imageData.jpg';   //200x200

结果发现在浏览器下都报错，firebug显示的错误是：

Security error" code: "1000
   var imagedata = ctx.getImageData(10, 10, 200, 200);

去网上搜了一下，原来这个函数包含着js跨域的问题。

    因为本地测试用的图片是文件夹内的，也有可能是一个url，js跨域限制是不能获取非同一域名下的数据的，而本地的位置是没有域名的，url是非同一域名的，所以浏览器都认为你是跨域了，才会报错。
    如果一定要测试这个代码，解决办法也容易，我是直接把文件放到了apache根目录，然后localhost访问就OK了。。


参考文章：
http://blog.project-sierra.de/archives/1577

/*-----------------------------------------IT EYE 祈祷幸福原创，转载请注明。-----------------------------------------*/

评论

2 楼 bigbone 2015-11-11  

建议楼主把文章删除，这么白痴的解决方案。

1 楼 601046124 2013-09-28  

这么白痴的解决办法 你也好意思拿出来写？