使用 JavaScript 截取 html 元素的移動視圖

Question

幾天前我開始使用 HTML2Canvas，經過一些研究，我設法編寫了一個小腳本，用它我可以將特定的 HTML div 保存為 png。 （我在這里保存一張桌子）

我從桌面上得到的圖像。

桌面截圖

但問題是，當我從移動視圖截取屏幕截圖時，它會按原樣顯示元素。

手機截圖

現在我知道 canvas 將按照顯示的方式繪制屏幕/div，但我想保存整個表格而不是半滾動。 有沒有辦法在不改變表格樣式的情況下做到這一點？

代碼

    $(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

可能有更好的方法來解決它，但這是我使用的方法。

首先刪除 Html 表響應 class

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

將 html2canvas function 更改為

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");       

   }