Html2canvas: 只呈现视图中的内容

不知何故，在主页上的示例中，它显示了正文中的所有内容，即使是未查看的内容……您是怎么做到的？

可能重复来自： https :

所以，我想知道如何捕获一个指定的元素？ 有没有人有解决方案？

@justein试试这个

<div id="test-case">Test-me</div>

html2canvas(document.getElementById("test-case")).then(function(canvas) {
    document.body.appendChild(canvas);
});

我可以用最新版本确认这种行为。 它将呈现所需对象的正确大小，但实际上不会将当前视口屏幕外的任何内容呈现到画布上。 所以如果

<div id="test-case">Test-me</div>

当前在浏览器中可见，它将呈现。 如果它在屏幕外，画布是空白的（但大小合适）。 部分可见：部分渲染。 我的不像 scrollHeight = 0，它在代码执行时呈现任何可见的东西。 （我的按钮在底部）。

就像 btm 的评论一样，我想知道它是如何在示例站点上完成的。 是否可以依赖 Angular 或 Bootstrap 中的某些内容来获取屏幕外资源？

@cchubb我不明白 Angle 和 Bootstrap 与此有什么关系。 约翰的问题在我看来是渲染特定元素的问题。

如果您想要在视口之外进行渲染，只需使用

html2canvas(document.body).then(function (canvas) {});

如果要渲染元素“溢出”，请在运行时删除“溢出”并在使用 javascript 添加 className 的过程后再次添加，如下所示：

.no-scroll {
     overflow: visible !important;
}

#main {
     overflow: auto;
     height: 200px;
}

<div id="main">
test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> 
test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> 
test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> 
</div>

document.getElementById("main").className = "no-scroll";
html2canvas(document.body).then(function (canvas) {
      document.getElementById("main").className = "";
});

或者只是指向 html2canvas 以“溢出”呈现元素内的元素，如下所示：

#parent {
     overflow: auto;
     height: 200px;
}

#child {
background-color: #fc0;
height: 600px;
}
<div id="parent">
<div id="main">
test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> 
test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> 
test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> 
</div>
</div>

html2canvas(document.getElementById("main")).then(function (canvas) {});

从我的角度来看，确实有很多关于不必要的功能的建议，只需定位正确的 DOM 元素并使用“CSS”来帮助他们。

我想到了。 您在 0.5.0-alpha2 中修复了它。 如果我使用 0.5.0-alpha1 版本它会剪辑，但 alpha2 版本不会。 我什至没有注意到 alpha2 可用，因为发布页面关注的是 alpha1。

这是一个演示它现在与 alpha2 一起工作的小提琴。 https://jsfiddle.net/cchubb/fy7tw7ek/1/如果您将外部资源改回 alpha1，则单击底部链接时它将剪辑。 （您需要将下载文件另存为 .png 才能查看，小提琴不会让我将输出窗口 href 更改为数据。）

@btm1 ，尝试升级到 Alpha2。

@cchubb我会

@cchubb根本问题已在 alpha 2 中修复，您说得对，它隐藏得很好，我什至没有注意到有 alpha 2。

嗯，对我来说，即使在 alpha2 中，仍然只渲染了视口中“可见”的元素部分。 有关演示，请参见http://jsfiddle.net/NPC42/ykvL6a17/——html2canvas仅导出滚动到视口中的那些行（无论它们在滚动的容器 div 中是否可见）。

我是否以某种方式调用 html2canvas 错误？ 当我在我的实际代码（不是我为演示而创建的 JSFiddle 代码）上测试它时，这个建议有助于渲染整个元素： https :

@NPC它不会只呈现不在视图中的内容，而无需您做任何事情，您必须将其更改为溢出可见 ---> 非常快速地导出 ---> 然后将其改回以再次滚动，否则将无法工作。 不理想的 IMO 我认为应该有一个选择让它工作，但至少它确实如此。

@btm1 ，是的，我认为这不是意图，因为我传入了滚动元素内的元素，元素本身没有任何溢出修剪。

现在在我的应用程序中，我发现我需要将我的整个元素重新附加到主体上，强制其具有特定的宽度/高度（因为它包含绝对定位的元素），同时通过全屏“准备导出，请稍等”覆盖，因为 html2canvas 需要 10+ 秒来渲染它。 渲染完成后——我将它附加回原始位置（在滚动容器内），取消设置宽度/高度。

麻烦，但它有效。

奇怪的是，它只从给定元素的当前可见顶部边界呈现。

试试https://jsfiddle.net/bianjp/bpc3nq69/1/。 滚动到“打印屏幕”并单击它。 生成的图像将不包含单击时不可见的顶部线条。
使用版本 0.5.0.beta4。

解决方案是在调用 html2canvas 之前调用$('html, body').scrollTop(0) （或任何其他方式使元素顶部呈现可见）。

感谢@bianjp提出修复建议。

奇怪的是，它只从给定元素的当前可见顶部边界呈现。

这是正常的行为吗……我觉得很奇怪！

+1

这个SO答案对我有用。

在调用 html2canvas 之前，将要渲染的元素滚动到视口中。

const el = document.querySelector('#test')
el.scrollIntoView()
setTimeout(function () {
  html2canvas(el, {
    onrendered: function (canvas) {
      document.body.appendChild(canvas)
    },
    useCORS: true
  })
}, 10)

这个对我有用。
使用版本是 0.5.0-beta4。

这仍然是v1.0.0的问题吗？ 如果是这样，请您分享一个关于jsfiddle的例子。

此问题已自动关闭，因为我们要求原作者提供更多信息的请求没有得到回应。 只有当前问题中的信息，我们没有足够的信息来采取行动。 如果您有或找到我们需要的答案，请联系我们，以便我们进一步调查。

嘿，@niklashvh

我还面临拍摄仅对 DOM 可见的快照的问题。 我有 0.5.0-beta4 版本
所以，我同意@ziyoung 的解决方案。 我按照他的建议做了同样的事情。

           `$('html,body').scrollTop(0);

     html2canvas( $("#rectangular_div"), {
         useCORS: true,
         dpi: 200,

          onrendered:function(canvas) {

              var str = canvas.toDataURL("image/png");
              var contentType = 'image/png';
              console.log(str);
              b64Data =str;
              imgFrameSave();
          }
        })`

因此，我将顶部 0 的 div 位置设置为主体，然后调用 html2canvas 。 因此，根据我的经验，我建议使用@eKoopmans 的0.5.0-

这在桌面上工作，但在移动设备上不起作用

我所做的是在调用 htmltocanvas() 之前window.scrolTo(0,0) ，如果您在屏幕顶部，则 div 会打印完整