使用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' 时，它就起作用了。

- Midhuna

Answer 1

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

- varun sharma

---

jQuery版本：$(clonedDoc).find('#mydiv').css('display', 'block'); - parse

Answer 2

您可以使用不透明度设置为 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);
    }
});

- Trajche Manev

---

随着html2canvas.js的最新版本，这些代码可以正常工作，因为“onrendered”已经被弃用了。第一部分：<div id="capture" style="padding: 10px; background: #f5da55; opacity: 0.0;"><h4 style="color: #000; ">Hello world!</h4> </div> - ElliotCui

<script type="text/javascript"> $('#btn-click').on('click', function() { html2canvas(document.querySelector("#capture"), { removeContainer: false, onclone: function(doc) { div = $(doc).find('#capture'); div.css('opacity', '1.0'); } }).then(canvas => { document.body.appendChild(canvas) console.log(canvas); var imagedata = canvas.toDataURL('image/png'); console.log(imagedata); }); }) </script> - ElliotCui

Answer 3

以下代码对我有效。我正在使用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');
});

- M Fuat

Answer 4

html2canvas提供了一个名为'onclone'的选项，通过传递克隆的文档来使用。您可以在那里设置隐藏元素的可见性。

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

- Stalin

---

jQuery 版本：$(clonedDoc).find('#mydiv').css('display', 'block'); - parse

Answer 5

这是有效的：

要截图的内容

- Vladimir Mamulov

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();
    }
});

- Magnus Engdal

Answer 7

中请使用"visibility: none"代替"display: none"，并修改html2canvas.js脚本文件中的以下内容——在函数parseElement中更改

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

to

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

- user3687972

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();
    })

- lalitpendhare

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>

- Abdennour TOUMI

---

请不要使用这个，html2canvas有一个方法可以让您玩转克隆的文档元素样式...在这里看看：https://dev59.com/0WIj5IYBdhLWcg3wHhz_#38556127 - parse