使用 html2canvas 隱藏 div 的屏幕截圖

Question

如何截取隱藏 div 的屏幕截圖？ 下面給出的代碼不適用於隱藏的 div。

HTML

<div id="mydiv" style="display:none;" >  
 <p>Text</p>
</div>

<div id="canvas" style="display:none;">
<p>Canvas:</p>
</div>

 <div id="image">

  </div>

腳本

<script>
  var elem = $('#printDiv');
        html2canvas(elem, {
            onrendered: function (canvas) {
                var data = canvas.toDataURL('image/png');
                var image = new Image();
                image.src = data;
                document.getElementById('image').appendChild(image);
            }
        });

</script>

當我們將 div "mydiv" 的樣式設置為 'display:block' 時，它會起作用。

Answer 1

您可以使用設置為 0 的不透明度。這是示例示例：

<div style="position: absolute; opacity: 0.0;">
    <div id="tempImageThumbnail"></div>
</div>
var tempImageThumb = $('#tempImageThumbnail');
tempImageThumb.append("<div>some text</div>");

html2canvas([tempImageThumb.get(0)], {
    onrendered : function(canvas) {
         document.body.appendChild(canvas);
    }
});

Answer 2

html2canvas(mydiv, {
    onclone: function (clonedDoc) {
        clonedDoc.getElementById('mydiv').style.display = 'block';
    }
}).then((canvas)=>{
//your onrendered function code here
})

Answer 3

在 div 中使用“visibility: none”而不是“display: none”，並在 html2canvas.js 腳本文件中更改以下內容 - 在函數 parseElement 中更改

 if (getCSS(el, 'display') !== "none" && getCSS(el, 'visibility') !== "hidden")

到

if (getCSS(el, 'display') !== "none")

Answer 4

html2canvas 通過傳遞克隆的文檔提供了一個名為“ onclone ”的選項。 您可以在那里設置隱藏元素的可見性。

onclone: function(doc){
    hiddenDiv = doc.getElementById('myDiv');
    hiddenDiv.style.display = 'block';
}

Answer 5

以下代碼對我有用。 我將 Angular 與 jsPdf 和 html2canvas 庫一起使用

    html2canvas(document.getElementById("pdfTable"), {
  onclone: function (clonedDoc) {

     // I made the div hidden and here I am changing it to visible
    clonedDoc.getElementById('pdfTable').style.visibility = 'visible';
  }
}).then(canvas => {
  // The following code is to create a pdf file for the taken screenshot
  var pdf = new jsPDF('l', 'pt', [canvas.width, canvas.height]);
  var imgData = canvas.toDataURL("PNG", 1.0);
  pdf.addImage(imgData, 0, 0, (canvas.width), (canvas.height));
  pdf.save('converteddoc.pdf');
});

Answer 6

我不確定是否有一種開箱即用的方法來實現這一點。 如何顯示div，捕獲然后再次隱藏它？

var elem = $('#printDiv');

html2canvas(elem, {
    onrendered: function (canvas) {
        elem.show();
        var data = canvas.toDataURL('image/png');
        var image = new Image();
        image.src = data;
        document.getElementById('image').appendChild(image);
        elem.hide();
    }
});

Answer 7

這是有效的：

<div style="width:0;height:0;overflow: hidden"> <div> content to screenshot </div> </div>

Answer 8

您可以創建一個畫布功能，然后您可以根據它顯示和隱藏。 我也在使用 jsPDF 將圖像轉換為 pdf。 像這樣

   function generateCanvas() {
        html2canvas(document.querySelector("#yourid"), {
            scrollX: 0,
            scrollY: -window.scrollY
        }).then(canvas => {
            //var imgData = canvas.toDataURL("image/jpeg", 2.0);
        var imgData = canvas.toDataURL({
                format: 'jpeg',
                quality: 1.0
            });
    
        $("#canvas_container").attr("src", imgData);
            var pdf = new jsPDF();
            pdf.addImage(imgData, 'JPEG', 10, 10, 180, 150);  // 180x150 mm @ (10,10)mm
            pdf.save("download.pdf");
        });
    }
    
    $("#download_pdf").on("click", function (e) {
        e.preventDefault();
        $("#yourid").show();
        generateCanvas();
        $("#yourid").hide();
    })

Answer 9

首先，我敢說：這個解決方案適用於所有情況إن شاء الله

---

由於此解決方案基於 jQuery API，因此不要使用hide/show而是使用fadeOut/fadeIn 。

腳本：

<script>

           var elem = $('#printDiv');
            if(!elem.is(":visible")){
                elem.show();elem.fadeIn(1);elem.fadeOut(1);
             }
            html2canvas(elem, {
                onrendered: function (canvas) {
                  //your staff here
                }
            });
    
    </script>

---

注意：我們使用這個倉庫html2canvas ，語法會then發揮作用，而不是onrendered回調：

<script>

           var elem = $('#printDiv');
            if(!elem.is(":visible")){
                elem.show();elem.fadeIn(1);elem.fadeOut(1);
             }
            html2canvas(elem).then(function (canvas) {
                  //your staff here
                }
            );
    
    </script>