gpt4 book ai didi

javascript - 受污染的 Canvas 无法导出

转载 作者:行者123 更新时间:2023-11-29 10:31:02 32 4
gpt4 key购买 nike

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

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

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
)

现在我的应用想通过 EXPORT Canvas

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

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

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

事实上,我现在陷入了一个循环:

  1. 添加 crossOrigin 属性会导致在我的 Canvas 上添加图像失败。
  2. 删除 crossOrigin 属性使我可以在我的 Canvas 上添加图像但不允许导出它

我已尽一切努力使这项工作成功,也尝试使用 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>

如何将图像添加到 Canvas 并在之后导出?

最佳答案

对于同样被这个问题绊倒的人。我做了更多研究,发现这确实是 Chrome 的一个常见问题,因为 Safari 似乎工作正常。在 Canvas 上添加的 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'

关于javascript - 受污染的 Canvas 无法导出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46011849/

32 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com