2

我正在构建一个 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 颜色代码的情况下更改像素值，它确实有效。当我在本地加载图像时，上面的代码片段确实有效，但当我尝试从在线服务器（如公共 Dropbox 帐户）访问图像时则无效。Firefox 告诉我这是一个安全问题；有没有办法绕过它？

4

1 回答 1

2

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

请参阅HTML5 Canvas getImageData 和同源策略

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

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

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

于 2013-04-02T04:10:27.823 回答