如何避免帆布污染？

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添加唯一的缓存中断参数解决了我的问题，以确保从未缓存图像。