Amazon S3 图像，无法使用 html5 画布保存，出现受污染的画布错误

Posted 2023-02-27

【中文标题】Amazon S3 图像，无法使用 html5 画布保存，出现受污染的画布错误

【英文标题】：Amazon S3 image, cannot be saved using html5 canvas, gives Tainted Canvases Error

【发布时间】：2014-07-11 08:38:29

【问题描述】：

在使用画布保存图像时遇到问题（Chrome、Firefox 和 Safari），

当我在 html5 画布中加载托管图像时，画布中显示错误（尽管仅在 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.

当我尝试将画布另存为图像时，

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 保存画布图像，但问题在 Firefox 和 Safari 中仍然存在

【问题讨论】：

显示与 img 元素相关的所有代码：它是如何创建的、何时设置 crossOrigin 属性、何时设置 src 属性等。所有这些对于解决您的问题都很重要问题

@Ray 抱歉回复晚了，不同的时区，这是我的jsfiddle.net/mandeeeep/Z8cBC/4

【参考方案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 输出。

【讨论】：

在 Firefox 中，我使用crossOrigin="anonymous" 没有任何问题，但我仍然无法保存画布img，如果是chrome，即使我删除了attr 错误是依然执着。你可以看看我的小提琴。

最初的问题是关于画布，而不是 html。

downvoted 就像我做 canvas.imageUrl 时一样，它在 firefox 和 chrome 上都出现了污染错误，尽管图像显示在 ui 上