如何避免帆布污染？

Question

我嘗試將“畫布”另存為圖像。 但是它總是失敗。 我一直在尋找Internet和Stackoverflow.com，但找不到正確的答案。 我用這個問題的答案來獲取上下文。 這可以正常工作，但是如果我使用context.toDataURL ，則會收到未捕獲的SecurityError錯誤：無法在'HTMLCanvasElement'上執行'toDataURL'：可能無法導出污染的畫布。

我現在不明白為什么要得到這個消息，因為我在畫布和視頻流中添加了屬性crossorigin="anonymous"並且如果我在javascript部分中檢查了該屬性，我仍然會收到crossorigin是匿名的。 因此，它應該工作。

function captureimage(){
var canvas = document.getElementById("c");
var video = document.getElementById("v");
var ctx;
if(video.paused) {
    try {
         ctx = canvas.getContext('2d').drawImage(video, 0, 0);
     } catch (e) {
          alert(e);
     }
     var a = ctx.toDataURL();
}   
}

如何解決此安全問題？ 我還在我的httpd.conf中添加了Header set Access-Control-Allow-Origin * ，但這也不能解決問題。

Answer 1

我遇到了同樣的問題，可以通過在視頻代碼中添加crossorigin =“ *”來解決

Answer 2

當我嘗試繪制Chrome已緩存到畫布中的圖像時遇到了這個問題。 我通過向圖像URL添加唯一的緩存中斷參數解決了我的問題，以確保從未緩存圖像。