当前位置: 代码迷 >> JavaScript >> 屏幕外 div 不适用于 html2canvas
  详细解决方案

屏幕外 div 不适用于 html2canvas

热度:87   发布时间:2023-06-05 11:49:12.0

我正在使用 html2canvas 来捕获一些 div。 如果 div 在捕获时在屏幕上,则一切正常。 但是如果我碰巧向下滚动页面并且那时 div 不在屏幕上,那么它不会捕获 div。 对于屏幕外捕获的 div,画布输出通常是空白的。 我怎样才能解决这个问题? 即使 div 在屏幕上或屏幕外,我如何捕获 div?

  var elem = document.getElementById('myElem');
     document.querySelector("button").addEventListener("click", function() {
        html2canvas(document.querySelector("#content"), {
           canvas: elem,
           width: 200,
           height: 250,
           useCORS: true
       }).then(function(canvas) {
           console.log('Drew on the existing canvas');
       });
   });

我也遇到了捕获屏幕外元素的问题。 结果是 html 和 body 元素溢出:它们上隐藏了样式,导致捕获的屏幕外画布是纯黑色图像。 在捕获期间临时重置 html 和 body 元素上的溢出样式解决了该问题。 在您的情况下,可能有其他具有溢出规则的元素以类似的方式干扰溢出设置为隐藏或滚动。