使用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

<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

使用＆＃34;可见性：无＆＃34;代替＆＃34;显示：无＆＃34;在div中并在html2canvas.js脚本文件中更改以下内容 - 在函数parseElement中更改

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

到

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

Answer 4

以下代码对我有用。我在jsPdf和html2canvas库中使用Angular

void makePdf() async {

  final pw.Document doc = pw.Document();
  pw.Font font = pw.Font.ttf(await rootBundle.load('assets/Exo-Bold.ttf'));

doc.addPage(
  pw.Page(
    pageFormat: pdf.PdfPageFormat.a4,
    build: (pw.Context context) {
      return pw.Center(
        child: pw.Text(
          "Hello World",
          style: pw.TextStyle(font: font),
        ),
      ); // Center
    },
  ),
);

final file = File("ms.pdf");

List<int> data = doc.save();
// print(data);

file.writeAsBytes(data).then((file) {
  print("done");
}).catchError((e) => print(e));

Answer 5

这有效：

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

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

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

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

Answer 8

首先，我敢说：这个解决方案适用于所有情况إن شاء الله

  

由于此解决方案基于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>

Answer 9

您可以创建一个画布功能，然后可以基于它显示和隐藏。我还使用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 10

使用可见性：折叠它将起作用