HTML5 Canvas getImageData - 安全问题

Question

我正在构建一个 Web 应用程序，它通过 FileReader API 读取图像，然后将其显示在 Canvas 上。之后，我在画布上调用 .getImageData 后，逐个像素地重新着色图像，如下所示：

// Color Image on Canvas
ctx = document.getElementById('my_canvas').getContext('2d');
var img_px = ctx.getImageData(0,0,canv_w,canv_h);
img_px = colorImage(img_px,red,green,blue);
ctx.putImageData(img_px,0,0);

colorImage() 是我编写的一个函数，它在给定相应的 RGB 颜色代码的情况下更改像素值，它确实有效。当我在本地加载图像时，上面的 sn-p 代码确实有效，但当我尝试从在线服务器（如公共 Dropbox 帐户）访问图像时，它就不起作用了。 Firefox 告诉我这是一个安全问题；有没有办法绕过它？

Answer 1

我认为这是一个跨域资源共享 CORS（安全）问题。

见HTML5 Canvas getImageData and Same Origin Policy

要点是，对来自外部域的图像的请求可以固有地提供用户的身份验证 cookie 等，从而允许您的 javascript 访问其可能受保护的图像和资产。虽然您可以通过 <img> 引用它们，但 CORS 被建立为一种安全协议，以防止您以编程方式读取（并可能存储）像素数据。

从 2012 年 8 月中旬开始，Dropbox API 支持 CORS。一旦用户正确进行身份验证，您就可以使用他们的 API 完成您想要的工作。

https://github.com/dropbox/dropbox-js/blob/master/doc/getting_started.md