Question

当我需要捕获放置在长度超过30000像素的html主体上的控件时，html2canvas库表现得很奇怪。我的控制很小（100 x 100） - 但是当身体很长时，脚本不起作用。

这里有两个小提琴，一个正在工作，另外一个是不能正常工作的

$(document).ready(function() {
  $('#test').on('click', function() {
    html2canvas(document.getElementById('container'), {
      onrendered: function(canvas) {
        document.body.appendChild(canvas);
      },
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>

<body style="height:40000px">

 <button id="test">test</button>

 <div id='container'>
   <img style='width:200px; height:200px;' src="www.example.com/example.jpg">
 </div> 
</body>

在上面的示例中，库返回一个图像 - 但数据无效。如果我将身高改为20000像素，那么一切正常

Answer 1

最后我发现为什么会发生这种情况，基于this stackoverflow answer

html2canvas库创建一个画布，其宽度高度是文档正文的宽度和高度。如果文档宽度或高度超过浏览器允许的最大宽度和高度，则无法为该文档正文创建画布，这就是我获取无效图像的原因。

为了解决这个问题，我克隆了要转移到图像的元素并设置到文档的顶部（'position: absolute; top: 0'）并从中获取图像。获取图像后，我删除了克隆元素。记得这样做我们需要设置“html2canvas”库选项的宽度和高度属性。

我的情况我的元素最大高度是1000px而我设置了3000,3000因此它可以覆盖位于顶部的整个元素。

注意：不要设置隐藏或隐藏克隆元素。

html2canvas($parentNode, {
                           width: 3000,
                           height:3000,
                           onrendered: function(canvas) {
                               console.log(canvas.toDataURL());
                               $parentNode.remove(); //removing cloned element
                                }
                            });

Answer 2

$('#test').click(function () {
    // Create clone of element.
    var clone = $('#element').clone(); 

    // Append clone to body.
    $('body').append(clone); 

    html2canvas($('#element'), {
        onrendered: function (canvas) {
            console.log(canvas.toDataURL("image/png")); 

           // Remove clone element.
          clone.remove();
        }
    });
});

Answer 3

为我工作，在overflow-y:hidden之前将样式html2canvas添加到body标签，并在之后将其恢复到overflow-y:scroll。

$("#doss").click(function(){
    $('body').css('overflow-y','hidden');
    html2canvas(document.querySelector("body")).then(canvas => {
       document.body.appendChild(canvas)
    });
    $('body').css('overflow-y','scroll');
});`

当身高超过30000像素时，html2canvas会返回无效图像

3 个答案: