1

我正在使用 Blur.js (http://blurjs.com/) 在我的 Rails 应用程序中模糊图像。我最近开始使用 Amazon S3 而不是在文件系统中存储图像。现在，当 blur.js 尝试模糊图像时，我在 Chrome 控制台中收到此错误：

Unable to get image data from canvas because the canvas has been tainted by cross-origin data.
Uncaught Error: unable to access image data: Error: unable to access local image data: ReferenceError: netscape is not defined
4

2 回答 2

2

我们在 blur.js 中有一个错误。在将图像绘制到画布并从画布中获取图像二进制数据时，需要确保源图像具有允许 CORS 操作的特殊属性。

在 blur.js 中，

tempImg = new Image();
if(formattedSource.match(/http:\/\/|https:\/\//)){
    tempImg.setAttribute('crossorigin', 'anonymous');
}
于 2013-09-11T08:24:50.800 回答
0

您需要为包含您希望通过 Javascript 操作的图像的 S3 存储桶启用CORS 。从上面的文档

跨域资源共享 (CORS) 为加载在一个域中的客户端 Web 应用程序定义了一种与不同域中的资源进行交互的方式。借助 Amazon S3 中的 CORS 支持，您可以使用 Amazon S3 构建丰富的客户端 Web 应用程序，并有选择地允许跨域访问您的 Amazon S3 资源。

通过在您的 S3 存储桶和您的域（使用 Blur.js 的地方）之间设置资源共享，您的问题中提到的警告/错误应该会消失。

于 2012-12-06T02:30:43.580 回答