Question

我正在使用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

Answer 1

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

在blur.js中，

tempImg = new Image();
if(formattedSource.match(/http:\/\/|https:\/\//)){
    tempImg.setAttribute('crossorigin', 'anonymous');
}

Answer 2

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

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

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

Blur.JS无法使用Amazon S3 Images

2 个答案: