Question

关注此主题 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>

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

Answer 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'

无法导出受污染的画布

1 个答案: