受污染的画布无法导出

Posted 2023-03-04

【中文标题】受污染的画布无法导出

【英文标题】：Tainted canvas cannot be exported

【发布时间】：2018-02-11 04:53:58

【问题描述】：

关注这个话题 Caching effect on CORS: No 'Access-Control-Allow-Origin' header is present on the requested resource

我已经能够用我的 html-canvas 解决一个奇怪的 CORS 问题。如上面的线程所述，我在通过下面的函数添加图像时收到了标准浏览器 CORS 违规警告，但非常“随机”取决于是否清除浏览器缓存，我无法真正重现原因。当删除 crossOrigin: 'anonymous' 属性时，我完全能够通过这个函数将图像从 S3 添加到画布：

fabric.Image.fromURL url, ((img) ->
    # scale template image
    img.scale 0.5
    img.name = 'template_img'
    # add image to canvas
    canvas.add img
    # send to back
    canvas.sendToBack img
    # make not selectable since its the background image
    img.selectable = false
    return
  )

现在我的应用想要通过

导出画布

dataURL = canvas.toDataURL(
        format: 'png'
        quality: 0.8)

但是，由于现在缺少 crossOrigin = 'anonymous' 属性，这被浏览器阻止了：

DOMException：无法在“HTMLCanvasElement”上执行“toDataURL”： 受污染的画布不得导出。

其实我现在陷入了循环：

添加 crossOrigin 属性会导致在我的画布上添加图像失败。 删除 crossOrigin 属性会使我在画布上添加图像，但不允许导出它

我已经尝试了一切来完成这项工作，也使用了 CORS 规则，但除了标准通配符和域设置之外，我无能为力。

我在 AWS S3 上的 CORS 规则集：

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

如何将图像添加到画布并在之后将其导出？

【问题讨论】：

图片在您的域/服务器上吗？还是来自其他域？

a strange CORS issue - 什么问题？图像仍然是交叉原点吗？

图像在我建立了 CORS 规则的 S3 上。 CORS 问题与上述线程完全相同：由于“随机”缓存并删除 crossOrigin 属性解决了它。

【参考方案1】：

也适用于遇到此问题的任何人。我做了更多的研究，发现这确实是 Chrome 的一个常见问题，因为 Safari 似乎工作正常。在画布上添加的 URL 后面添加时间戳时，我会阻止浏览器每次都缓存它。这解决了 crossOrigin 问题，让我可以正确添加属性。

修改代码：

url = url + "?" + Math.random()
fabric.Image.fromURL url, ((img) ->
  # scale template image
  img.scale 0.5
  img.name = 'template_img'
  # add image to canvas
  canvas.add img
  # send to back
  canvas.sendToBack img
  # make not selectable since its the background image
  img.selectable = false
  return
), crossOrigin: 'anonymous'