Javascript Canvas获取图像像素数据

时间:2013-06-10 18:58:27

标签: javascript image canvas getimagedata

我有一个关于javascript canvas的两部分问题:

第1部分:
我在与html文档相同的文件中有一个.jpg。我想知道是否有一种简单的方法可以在该文件中获取像素的颜色,而无需使用context.getImageData()。

第2部分: (如果第1部分过于复杂而无法使用。)
如果我直接将此站点中的代码W3 schools getImageData()复制到桌面上的html文件中,并将名为 img_the_scream.jpg 的图像添加到我的桌面,然后运行它我收到此错误:

Unable to get image data from canvas because the canvas has been tainted by cross-origin data. test.html:15
Uncaught Error: SecurityError: DOM Exception 18 

我真的不知道它为什么适用于该网站,但不适合我。

1 个答案:

答案 0 :(得分:2)

这是Same Origin Policy强加的限制:如果服务器明确允许使用CORS headers,则无法读取其他来源提供的JavaScript数据。

如果你想获得由另一台服务器服务的图像的像素而这个服务器没有设置这个标头,那么你必须使用一种代理或者通过提取来处理你的服务器图像服务器端。

请注意,浏览器认为来自file://的所有文件的来源不同。如果您尝试在本地执行此操作,则必须使用http服务器。