html - Amazon S3 图像，无法使用 html5 Canvas 保存，出现 Tainted Canvases 错误

Question

在使用 canvas 保存图像时遇到问题(Chrome、Firefox 和 Safari)，

当我在 html5 Canvas 中加载托管图像时， Canvas 中显示错误(尽管仅在 Chome 而非 Firefox 中)，图像来自 Amazon S3 服务器:

Image from origin 'https://xxx.s3.amazonaws.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9015' is therefore not allowed access.

当我尝试将 Canvas 保存为图像时，

Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

是的，我已经设置了 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>

和

img.crossOrigin = 'something'

然后我查看了Respond Proxy Js ，但无法理解如何使用它。

我已经查看了很多 SO 帖子和其他引用资料，但无法解决问题。任何人都可以为我提供任何解决方案。

@Update:如果我更改行 <AllowedOrigin>*</AllowedOrigin> => <AllowedOrigin>http://localhost:9015</AllowedOrigin> , 解决方案似乎允许Chrome保存 Canvas 图像，但问题在Firefox和Safari中仍然存在

Answer 1

在 firefox 和 IE 中你需要看起来像

<img src="https://platform3-preit-image.s3.amazonaws.com/components/fireside2.png" crossOrigin="anonymous" class="draggable-image" />

在 chrome 中它需要没有 crossOrigin。如果您在 chrome 中包含 crossOrigin 属性，它将失败。

<img src="https://platform3-preit-image.s3.amazonaws.com/components/fireside2.png" class="draggable-image" />

所以基本上你需要根据浏览器呈现两个不同的 html 输出。