Javascript 使用html2canvas的隐藏div屏幕截图

如何拍摄隐藏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>

var elem=$（'printDiv'）；
html2canvas（元素{
onrendered：函数（画布）{
var data=canvas.toDataURL（'image/png'）；
var image=新图像（）；
image.src=数据；
document.getElementById（'image'）.appendChild（image）；
}
});

---

当我们将div“mydiv”的样式设置为“display:block”时，它就会工作。

我不确定是否有现成的方法来实现这一点。显示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();
    }
});

---

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

var tempImageThumb=$（“#tempImageThumbnail”）；
tempImageThumb.append（“一些文本”）；
html2canvas（[tempImageThumb.get（0）]{
onrendered：函数（画布）{
document.body.appendChild（画布）；
}
});

在div中使用“可见性：无”而不是“显示：无”，并在html2canvas.js脚本文件-函数parseElement change中更改以下内容

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

到

首先，我敢说：这个解决方案在所有情况下都能很好地工作

---

由于此解决方案基于jQueryAPI，因此不要使用

hide/show

，而是使用

fadeOut/fadeIn

脚本：

---

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

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

---

下面的代码适用于我。我将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');
});

这是有效的：

屏幕截图内容

您可以创建一个画布函数，然后根据该函数进行显示和隐藏。我还使用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();
    })

---

jQuery版本：

$（clonedDoc）.find（'#mydiv'）.css（'display'，'block'）jQuery版本：
$（clonedDoc）.find（'#mydiv'）.css（'display'，'block'）请不要使用此选项，html2canvas有一种方法允许您使用克隆文档元素样式…请看这里：使用最新版本的html2canvas.js。这些代码运行良好，因为
onrendered
早就被弃用了。第一部分<代码>你好，世界第2部分
$（'#btn click'）。在（'click'，function（）{html2canvas（document.querySelector（'capture'），{removeContainer:false，onclone:function（doc）{div=$（doc）。find（'capture'）；div.css（'opacity'，'1.0'）；}）。然后（canvavas=>{document.body.appendChild（canvas）console.log（canvas）；var-imagedata=canvas.toDataURL（'image/png'））；console.log（imagedata）；}）；}）
onclone: function(doc){
    hiddenDiv = doc.getElementById('myDiv');
    hiddenDiv.style.display = 'block';
}

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

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

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