Javascript HTML2Canvas不呈现完整div，只呈现屏幕上可见的内容？

我正在尝试使用渲染div的内容。以下是代码：

var htmlSource = $('#potenzial-page')[0];

$('#btn').on("click", function() {          

    html2canvas(htmlSource).then(function(canvas) {
        var img = canvas.toDataURL();
        window.open(img);
    });

});

我正在使用v5 beta 3

当此代码运行时，它仅呈现屏幕上可见的内容。

#potenzial页面

div基本上是整个页面，减去页眉和页脚。此div中的所有内容都可以通过滚动显示（有一些隐藏元素，但我不希望隐藏元素在图像中可见）

我找不到哪里出了问题，也找不到为什么它不能保存整个div。我还应该注意，图像似乎与div一样高，但只是部分可见

为了举例说明我的意思，这里有一个比较：

左边是HTML2Canvas应该如何呈现div。右边是它运行上面代码时的呈现方式。右边的图像是我的浏览器屏幕中可见的图像

我确实尝试添加了

height

选项，但没有任何区别

更新

如果我滚动到页面的最顶端，然后运行脚本，它将按原样呈现整个div

---

如何在不必滚动到顶部的情况下渲染div？

一个适合我的解决方案是在css中添加以下内容：

.html2canvas-container { width: 3000px !important; height: 3000px !important; }

它防止html2canvas将渲染限制在可视区域（这似乎是默认设置）

---

请参见此处：

我在我的案例中使用了

window.scrollTo（）

，它对我很有用

下面是一个示例代码

$('#btn').on("click", function() { 
    window.scrollTo(0,0);     
    html2canvas(htmlSource).then(function(canvas) {
        var img = canvas.toDataURL();
        window.open(img);
    });
    window.scrollTo(0, document.body.scrollHeight || document.documentElement.scrollHeight);
});

如果将高度设置为要转换为画布的div，则需要在实际拍摄快照之前删除该高度。否则它会因为这个高度而把它剪掉

 $(".yourElemThatHasSomeHeightSet").css("height", "");

然后你会注意到向下滚动仍然会剪切你的文档。 只需执行以下操作：

$("html, body").scrollTop(0);

在拍摄快照之前

  window.scrollTo(0,0);  

---

添加这个对我很有用。

我刚刚做了类似的事情，它对我很有用：

html2canvas(document.querySelector("#capture2image"), {
            allowTaint: true,
            useCORS: true,
            logging: false,
            height: window.outerHeight + window.innerHeight,
            windowHeight: window.outerHeight + window.innerHeight, 

---

您可以在html2canvas中添加滚动位置作为变量，这样就不需要滚动页面

html2canvas（document.querySelector（“您的元素”）{
X:0，
滚动：0
})。然后（函数（画布）{

我希望它能帮助您

html2canvas(htmlSource, {scrollY: -window.scrollY}).then(function(canvas) {
            var img = canvas.toDataURL();
            window.open(img);
        });

---

这就是我在Reactjs中取得的成就

主要问题是比率和规模 如果执行快速窗口.devicePixelRatio，它的默认值是2，这导致了半图像问题

const printDocument = () => {
  const input = document.getElementById('divToPrint');
  const divHeight = input.clientHeight
  const divWidth = input.clientWidth
  const ratio = divHeight / divWidth;

  html2canvas(input, { scale: '1' }).then((canvas) => {
    const imgData = canvas.toDataURL('image/jpeg');
    const pdfDOC = new jsPDF("l", "mm", "a0"); //  use a4 for smaller page

    const width = pdfDOC.internal.pageSize.getWidth();
    let height = pdfDOC.internal.pageSize.getHeight();
    height = ratio * width;

    pdfDOC.addImage(imgData, 'JPEG', 0, 0, width - 20, height - 10);
    pdfDOC.save('summary.pdf');   //Download the rendered PDF.
  });
}

---

另一种反应方式

在“提交”按钮上，单击“动态设置文档高度”，然后使用document.body作为第一个参数调用html2canvas

<button onClick={() => {
var body = document.body,
html = document.documentElement;

var height = Math.max(body.scrollHeight, body.offsetHeight,
             html.clientHeight, html.scrollHeight, html.offsetHeight);
             document.body.style.height = `${height}px`

html2canvas(document.body).then(function (canvas) {
                var imgData = canvas.toDataURL('image/pdf')
                var doc = new jsPDF('p', 'mm', [canvas.width, canvas.height])
                doc.addImage(imgData, 'PDF', 10, 10, canvas.width, canvas.height)
                doc.save('name-of-pdf.pdf')
              });
}}>Submit</button>

{
var body=document.body，
html=document.documentElement；
var height=Math.max（body.scrollHeight，body.offsetHeight，
html.clientHeight、html.scrollHeight、html.offsetHeight）；
document.body.style.height=`${height}px`
html2canvas（document.body）.then（函数（canvas）{
var imgData=canvas.toDataURL（'image/pdf'）
var doc=new jsPDF（'p'，'mm'，[canvas.width，canvas.height]）
doc.addImage（imgData，'PDF'，10,10，canvas.width，canvas.height）
doc.save（'name-of-pdf.pdf'）
});
}}>提交

这将设置public/index.html的html高度，html2canvas似乎是从中呈现的（即，不是“根”div）。

这对我很有用：

  const input = document.getElementById('fragmentForPDF');
  
  // This row fixed problem
  input.parentNode.style.overflow = 'visible';

  html2canvas(input)...

---

对于不想解决滚动问题的人。：dom到图像

您可以在拍摄图像时滚动

而且速度要快得多（据本博客报道是70倍）

博客：

在博客中，它提到html到图像。它是dom-2-image的分支。我使用dom到图像（祖先，原始）

---

你成就了我的一天。这对我来说是一个伟大而快速的解决方案。如果你不在乎滚动到顶部，那么这很有效。谢谢你！工作非常完美。谢谢你。没有按预期工作。之前它只捕获可见部分，现在它从顶部捕获（很好），但只有一部分与高度相等，可见，其余部分为空白白色。唯一对我有效的答案是（我的特殊情况是地图仅部分在屏幕外，仅垂直）谢谢！我在页面底部有一个按钮，可以将页面上方的内容转换为图像。这是关键！做得好。这真的帮了我的忙。你有没有看过这个解决方案提出了一个解决方案，将溢出设置为可见，然后渲染，然后隐藏溢出。我面临同样的问题，您是如何解决的？此问题已解决：为我解决谢谢：-）

window.scrollTo(0, 0); // this will help to print if div hidden or on mobile screen

html2canvas(document.getElementById("my_div_img")).then(function (canvas) 
                 {
                    //for give white BG
                    var context = canvas.getContext('2d');
                    context.save();
                    context.globalCompositeOperation = 'destination-over';
                    context.fillStyle = "rgb(255, 255, 255)";
                    context.fillRect(0, 0, canvas.width, canvas.height);
                    context.restore();
                    var imgData = canvas.toDataURL('image/jpeg', 1);
                    //console.log(imgData);
}

var node = document.getElementById('my-node');

domtoimage.toPng(node)
    .then(function (dataUrl) {
        var img = new Image();
        img.src = dataUrl;
        document.body.appendChild(img);
    })
    .catch(function (error) {
        console.error('oops, something went wrong!', error);
    });