Javascript Canvas 获取图像像素数据

Question

我有一个关于 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 

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

Answer 1

这是 Same Origin Policy 施加的限制:如果服务器明确允许使用CORS headers，则无法读取由另一个源提供的JavaScript数据。 .

如果您想获取由您的服务器以外的其他服务器提供的图像的像素，并且该服务器没有设置此 header ，那么您必须在您的服务器上工作，通过使用某种代理或通过获取图像服务器端。

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