Question

我尝试将Canvas保存为图像。但它总是失败。我正在查找互联网和Stackoverflow.com，但我无法找到正确的答案。我使用此question中的答案来获取上下文。这工作正常，但如果我使用context.toDataURL我收到错误未捕获的安全错误：无法执行＆＃39; toDataURL＆＃39; on＆＃39; HTMLCanvasElement＆＃39;：可能无法导出受污染的画布。

我不明白为什么我到现在为止这样做，因为我添加到我的画布和videostream属性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 =＆＃34; *＆＃34;到视频标签

Answer 2

当我尝试绘制Chrome缓存到画布中的图像时遇到了这个问题。我通过向图像URL添加唯一的缓存中断参数解决了我的问题，以确保从未缓存图像。

如何避免污染帆布？

2 个答案: