模糊.JS不适用于 Amazon S3 映像

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

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

在模糊.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 S3 资源。

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