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

最新推荐文章于 2022-03-16 09:16:50 发布

原创最新推荐文章于 2022-03-16 09:16:50 发布 · 746 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#firebug #security #canvas #getimagedata #javascript #ViewUI

本文讨论了使用canvas的getImageData函数时遇到的跨域限制问题，并提供了通过将图片放置于Apache根目录下的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

[align=center]/*-----------------------------------------IT EYE 祈祷幸福原创，转载请注明。-----------------------------------------*/
[/align]

今天用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

[align=center]/*-----------------------------------------IT EYE 祈祷幸福原创，转载请注明。-----------------------------------------*/[/align]