如何使用 HTML2Canvas 获取完整 HTML 页面的屏幕截图

Question

我正在使用 HTML2Canvas 获取完整 HTML 页面的图像。我试图通过单击按钮将该图像保存在 PPT 中。 我可以将图像保存在 PPT 中。 但是保存的图像内容正在重叠，我在这里使用的警报大约需要 1 分钟才能显示。 当我进行调试时，我知道问题出在 HTML2Canvas 上。 我在我的页面中使用了许多第三方图表，例如 Google 图表。 您能否建议我使用 HTML2Canvas 的任何替代方案，因为当我们使用跨域内容时，HTML2Canvas 几乎没有限制。

$('#PPTExport').click(function(e) {


var canvas = document.getElementById('canvas');
var target = $('#loadImageHeader');
        html2canvas(target, {
        onrendered: function(canvas) {

        var data1 = canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream");

        alert(data1);




$.ajax({ 
url: "savechart", 
data:{
image1:data1
      }, 

type: 'POST', 
success: function (data) {
if(data=="success")
{

 $("#formid1" ).attr('action','savechartDownload');
 $( "#formid1" ).submit();
}
                           } 
         });

}
});
                                                                    });

Answer 1

我有这个问题的解决方案。 你可以试试这个。。

 html2canvas([document.body], {
        useCORS: true,
        proxy: "Server",
        onrendered : function(canvas) {                               
             var myImage = canvas.toDataURL("image/png");
             window.open(myImage);
        }
});

Server 是 node.js 或任何您可以编写的语言的 server url。

示例 Node.js：https://github.com/niklasvh/html2canvas-proxy-nodejs

在此处阅读更多信息：Can't capture google map with html2canvas

这里：Cross-origin image load denied by Cross-Origin Resource Sharing policy