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 数据。

如果您想获取由另一台服务器提供的图像的像素，并且该服务器没有设置此标头，那么您将必须在您的服务器上工作，通过使用某种代理或通过获取图片服务器端。

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