无法执行'getImageData' - 画布已被跨源数据污染

Question

我有兴趣在我的网站上使用smartcrop.js和一些用户上传的图像.用户可以将任何大小的图像上传到我的Amazon S3存储桶.然后,该图像与用户相关联,当他们访问他们的个人资料时,他们可以看到图像很好地裁剪.当我尝试在图像元素上使用smartcrop执行某种操作时,我得到错误:

smartcrop.js:282 Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

这可以通过以下步骤重现:

var image = new Image();
image.src = "https://freelancestudent.s3.amazonaws.com/files/google.png"
SmartCrop.crop(image, {width: 100, height: 100}, function(result){console.log(result);});
smartcrop.js:282 Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

我在S3控制面板中检查了CORS配置编辑器,它看起来像这样:

<CORSConfiguration>
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Authorization</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

我的理解是,<AllowedOrigin>*</AllowedOrigin>应该意味着这个问题不应该存在？我已经阅读了一个解决方案,我可以将图像保存到服务器进行显示,但我希望保持静态文件和生产服务器分开.有任何想法吗？

Answer 1

我能够通过略微修改我的CORS规则来实现这个目的:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

并设置crossOrigin到anonymous图像上:

image.crossOrigin = 'anonymous';

全套命令:

var image = new Image();
image.crossOrigin = 'anonymous';
image.src = "https://s3-us-west-2.amazonaws.com/boom-orca/people-deal-header.png";
SmartCrop.crop(image, {width: 100, height: 100}, function(result){console.log(result);});

截图: