为什么在html2canvas中相同的页面截图不一样

Question

我有一段代码，它接收div的屏幕截图，并将画布发送到php代码，以便使用jquery ajax存储在服务器中。我注意到，即使页面内容保持不变，屏幕截图也不一样。

​

​

这是上面的第一个屏幕截图，它正确地显示了所有div内容，下面是其他没有显示的div内容

​

​

​

​

有什么问题吗？

代码是

function capture(){
    window.scrollTo(0, 0);
    var element = document.getElementById("report_card_page");
    html2canvas(element).then(function (canvas) {
     var image = canvas.toDataURL("image/jpeg", 0.9);

     $.post("save-capture.php", {"image": image}, function(){
        alert("completed");
     });

  });

}

已编辑:这是div所在的页面

​

编辑:我注意到当我使用html2canvas - to -image而不是html2canvas创建屏幕截图时，它工作得很好，它显示了完整的内容，但产生的屏幕截图并不清晰。有什么解决方案吗，也许我可以使用dom- to -image来代替？

Answer 1

我发现解决方案是把成绩单放在不同的页面上。除了成绩单和“发布”按钮外，页面上什么也没有。没有侧边栏、页眉或页脚。