受污染的畫布無法導出

Question

遵循此線程對CORS的緩存效果：請求的資源上不存在“Access-Control-Allow-Origin”標頭

我已經能夠用我的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'：可能無法導出受污染的畫布。

事實上，我現在處於循環中：

1. 添加crossOrigin屬性會使我在畫布上添加圖像失敗。
2. 刪除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'