我想保存我的画布到img。我有这样一个函数:

function save() {
    document.getElementById("canvasimg").style.border = "2px solid";
    var dataURL = canvas.toDataURL();
    document.getElementById("canvasimg").src = dataURL;
    document.getElementById("canvasimg").style.display = "inline";
}

它给出了错误:

Uncaught SecurityError:未能在“HTMLCanvasElement”上执行“toDataURL”:受污染的画布可能无法导出。

我该怎么办?


当前回答

在img标签中将crossorigin设置为Anonymous。

<img crossorigin="anonymous" />

其他回答

对于任何在应用服务器跨源设置后仍然在S3中遇到相同问题的人来说,这可能是浏览器缓存问题。 所以你需要确保禁用缓存并再次测试,你可以从浏览器的dev-tools ->网络选项卡->单击禁用现金选项->重试:

我使用useCORS: true选项解决了这个问题

 html2canvas(document.getElementsByClassName("droppable-area")[0], { useCORS:true}).then(function (canvas){
        var imgBase64 = canvas.toDataURL();
        // console.log("imgBase64:", imgBase64);
        var imgURL = "data:image/" + imgBase64;
        var triggerDownload = $("<a>").attr("href", imgURL).attr("download", "layout_"+new Date().getTime()+".jpeg").appendTo("body");
        triggerDownload[0].click();
        triggerDownload.remove();
    });

我还通过添加useCORS: true解决了这个错误,在我的代码中像-

html2canvas($("#chart-section")[0], {
        useCORS : true,
        allowTaint : true,
        scale : 0.98,
        dpi : 500,
        width: 1400, height: 900
    }).then();

在我的情况下,我从我的桌面进行测试,即使在本地保存图像到子文件夹后,也有CORS错误。

解决方案:

移动文件夹到本地服务器WAMP在我的情况下。从本地服务器完美工作。

注意: 只有在本地保存图像时才有效。

在我的例子中,我从一个视频中用画布之类的东西画在一个画布标签上。为了解决受污染的画布错误,我必须做两件事:

<video id="video_source" crossorigin="anonymous">
    <source src="http://crossdomain.example.com/myfile.mp4">
</video>

确保在视频源响应中设置了Access-Control-Allow-Origin头(正确设置crossdomain.example.com) 设置视频标签为crossorigin="anonymous"