使用 JavaScript 为移动视图拍摄 html 元素的屏幕截图

Question

几天前我开始使用 HTML2Canvas，经过一些研究，我设法编写了一个小脚本，我可以用它保存特定的 HTML div 作为PNG。（我在这里存了一个table）

我从桌面获取的图像。

Desktop Screenshot

但问题是，当我从移动视图截取屏幕截图时，它显示了元素的原样。

Mobile Screenshot

现在我知道 canvas 会按照显示的方式绘制 screen/div，但我想保存整个 table 而不是滚动的一半。有没有办法在不改变 table?

样式的情况下做到这一点

代码

    $(document).on('click', '#takePic', function(){
   html2canvas(document.getElementById("final_order"),{
    allowTaint: true,
    useCORS: true,
   })
    .then(function(canvas) {
        var base64URL = canvas.toDataURL('image/jpeg').replace('image/jpeg', 'image/octet-stream');
        $.ajax({
        url: 'save-image.php',
        type: 'post',
        data: {action: "download",image: base64URL},
        success: function(data){
            alert("Success");
        }
        });
    });
});

如有任何帮助或指导，我们将不胜感激。

Answer 1

可能有更好的方法来解决它，但这是我使用的方法。

先去掉Htmltable响应式class

document.getElementById('table-you-want-convert').classList.remove("table-responsive");

将html2canvas函数改为

html2canvas(document.getElementById("table-you-want-convert"),{
    windowHeight: window.outerHeight + window.innerHeight,
    windowWidth: window.outerWidth + window.innerWidth,
    allowTaint: true,
    useCORS: true,
   })
    .then(function(canvas) {
         //save or download image
         //add responsive class again
        document.getElementById('table-you-want-convert').classList.add("table-responsive");       

   }

使用 JavaScript 为移动视图拍摄 html 元素的屏幕截图

Take Screenshot of html element for mobile view using JavaScript

html

javascript

jquery

html2canvas