Javascript HTML5画布getImageData-安全问题

我正在构建一个web应用程序，它通过FileReaderAPI读取图像，然后将其显示在画布上。之后，在画布上调用.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告诉我这是一个安全问题；有办法解决吗？

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

看

要点是，对来自外部域的图像的请求可能内在地提供用户的身份验证cookie等，从而允许您的javascript访问其可能受保护的图像和资产。虽然您可以通过

引用它们，但CORS是作为安全协议建立的，以防止您以编程方式读取（或者存储）像素数据

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

---

那么，获取图像数据的最佳方式是什么？我的直接想法是让用户将图像上传到运行web应用程序的同一台服务器上，然后以这种方式访问它。我觉得会有一种更简单的方法，尽管这可能只是一厢情愿……Dropbox API可能是一种很好的集成方式，但如果这是您要求用户提供的内容，请他们上传可能是最简单（也是最快的）目前的发展方向。你能给我一个关于如何允许Dropbox上托管的图像通过CORS的快速教程吗？我已经读到这是可能的，但到目前为止我无法让图像通过CORS。非常感谢！！！这回答了你的问题吗？