javascript - 如何避免 Canvas 被污染？

Question

我尝试将 Canvas 另存为图像。但它总是失败。我在互联网和 Stackoverflow.com 上查找，但找不到正确的答案。我使用这个question中的答案获取上下文。这工作正常，但如果我使用context.toDataURL，我会收到错误未捕获的安全错误:无法在“HTMLCanvasElement”上执行“toDataURL”:受污染的 Canvas 可能无法导出。

直到现在我还不明白为什么我会得到这个，因为我在 Canvas 和视频流中添加了属性 crossorigin="anonymous" 并且如果我检查 javascript 部分中的属性，我仍然收到跨域是匿名的。因此它应该有效。

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="*"解决了这个问题