HTML5 Canvas getImageData - 安全问题

Question

我正在构建一个通过FileReader API读取图像的Web应用程序，然后将其显示在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颜色代码的情况下更改像素值，它确实可以正常工作。当我在本地加载图像时，上面的代码段确实有效，但当我尝试从在线服务器访问图像时，它不会像公共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