被污染的帆布不能出口

根据这一线索 Caching effect on CORS: No 'Access-Control-Allow-Origin' header is present on the requested resource 被污染的帆布不能出口

我已经能够解决一个奇怪的CORS问题，我的HTML的画布。正如在上面的线程中所描述的，当通过下面的函数添加图像时，我得到了标准的浏览器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：无法执行'toDataURL'on 'HTMLCanvasElement'：受污染的画布可能无法导出。

事实上，我在现在是一个循环：

添加crossOrigin属性使得对我的画布添加图像失败。
卸下crossOrigin属性让我加入我的画布上的图像，但不允许出口吗

我想尽一切办法，使这项工作，与CORS玩耍规则以及但是除了标准的通配符和域的设置，我可以做的事情不多。

我的CORS规则集在AWS S3：

<?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>

我能做些什么，以图像添加到我的画布，后来出口吗？

来源

2017-09-02 DonMB

是你的域/服务器上的图像？或者他们来自另一个域名？ – Blindman67

'一个奇怪的CORS问题' - 什么问题？图像仍然是交叉的起源？ –

图像在S3上，我已经建立了CORS规则。 CORS问题与上面描述的线程完全相同：由于“随机”缓存而导致CORS违规，并删除crossOrigin属性解决了该问题。 – DonMB

对于绊倒这个问题的人也是如此。我做了更多的研究，发现这确实是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'

来源

2017-09-03 10:16:19 DonMB

真是太棒了！你花了我几个小时的研究。谢谢！！！！！ –

被污染的帆布​​不能出口

回答

相关问题

被污染的帆布不能出口