javascript 如何避免画布被污染?

uqzxnwby  于 2023-08-02  发布在  Java
关注(0)|答案(2)|浏览(104)

我尝试将画布保存为图像。但它总是失败。我在互联网和www.example.com上查找Stackoverflow.com,但我找不到正确的答案。我使用这个question中的答案来获取上下文。这工作正常,但如果我使用context.toDataURL,我会收到错误Uncaught 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();
}   
}

字符串
如何解决此安全问题?我还将Header set Access-Control-Allow-Origin *添加到httpd.conf中,但这也没有解决问题。

epggiuax

epggiuax1#

当我试图绘制Chrome缓存到画布中的图像时,我遇到了这个问题。我通过在图像URL中添加一个唯一的缓存中断参数来解决这个问题,以确保图像永远不会被缓存。

t3psigkw

t3psigkw2#

我也遇到了同样的问题,通过在视频标签中添加crossorigin="*”解决了这个问题

编辑:确实正确的做法是设置crossorigin="anonymous"

相关问题