Question

在使用html2canvas时，我有一个stack个DOM对象（相对定位的div包含各种各样的东西），我希望为其创建单独的缩略图。所以，如果有十个div，我将创建十个缩略图。

这些对象中的一些将在屏幕外 - 这些div中的每一个都在一个名为“mainDiv”的包含div中。我遍历mainDiv中的div并在每个div上单独执行html2canvas。

对于那些屏幕上的人，这很好用。屏幕外的那些不会 - 它们会变回空白。我创建了一个解决方法，将对象滚动到mainDiv的顶部，但这是一个kludge，在视觉上没有吸引力。

是否可以指定不可见的DOM对象？理想情况下，我希望能够指定一个包含div并让html2canvas忽略父可见性，因此我可以屏幕捕获隐藏的对象，但除此之外，我希望能够屏幕捕获对象只是滚动屏幕。

任何想法，想法？谢谢！

----这是一些示例代码。基本上，如果你在div中有一堆div，则迭代它们。我实际上是这样做recursively所以一次只处理一个，回调调用递归函数，所以它看起来像这样：

  function recurser(anIndex, callback) {
    if (anIndex == -1) {
        callback();
        return;
    }
    $(myDivs[anIndex]).html2canvas({
        onrendered : function(canvas) {
            var img = canvas.toDataURL();
            // store the image in an array, do stuff with it, etc.
            recurser(--anIndex, callback);

        }
    })

}

一旦递归调用完成，它就会执行回调函数，这是一个可以处理图像的函数。

同样，只要对象在包含#mainDiv中所有div的滚动div中可见，所有这一切都可以正常工作。然而，一旦div的任何部分被滚动，它们就会呈现黑色。事实上，如果两个div中的一半被滚动（一个的上半部分，下一个的下半部分），它们都会呈现完全黑色。

Answer 1

我知道这是一个古老的问题，但它看起来很有趣。根据我的测试，似乎只有position: absolute和position:fixed元素位于视口之外才会导致此问题。我想出了解决问题的方法。

我正在做的是复制元素。将克隆的样式设置为left = 0，top = window.innerHeight（以使其不在窗口内）和position = 'relative'。然后我将克隆附加到正文，在克隆上使用html2canvas，然后从正文中删除克隆。此解决方案适用于IE，Firefox和Chrome。

我创建了一个JSBin example here。这是关键的javascript代码：

function hiddenClone(element){
  // Create clone of element
  var clone = element.cloneNode(true);

  // Position element relatively within the 
  // body but still out of the viewport
  var style = clone.style;
  style.position = 'relative';
  style.top = window.innerHeight + 'px';
  style.left = 0;

  // Append clone to body and return the clone
  document.body.appendChild(clone);
  return clone;
}

var offScreen = document.querySelector('.off-screen');

// Clone off-screen element
var clone = hiddenClone(offScreen);

// Use clone with htm2canvas and delete clone
html2canvas(clone, {
    onrendered: function(canvas) {
      document.body.appendChild(canvas);
      document.body.removeChild(clone);
    }
});

Answer 2

将'overflow'设置为对其所有父元素可见。渲染后将其删除

CSS

.overflowVisible{
    overflow:visible !important;
}

JS

$("#container").parents().each(function(ind,elem){
    $(elem).addClass("overflowVisible");
});

html2canvas($("#container"), {
    onrendered: function(canvas) {
        var img =canvas.toDataURL("image/png");
        $('body').append(img);
        $("#container").parents().each(function(ind,elem){
            $(elem).removeClass("overflowVisible");
        });
    }
});

Answer 3

啊你现在试过Div显示：无;和Div显示：绝对; （或者你喜欢你的div出现 - 也许是z-index）

    arrow1.onclick = (event){
arrow1.style.display = none;
arrow2.style.display = absolute;
}

    arrow2.onclick = (event){
arrow2.style.display = none;
arrow1.style.display = absolute;
}

Answer 4

您可以使用最新版本的html2canvas。这解决了所有图像pix-elation问题和渲染对象问题。我使用了Erik koopmans refer this的版本0.5.0-beta4，并将html2canvas称为如下：

$('html,body').scrollTop(0); // Take your <div> / html at top position before calling html2canvas

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

          onrendered:function(canvas) {

              var str = canvas.toDataURL("image/png");
              var contentType = 'image/png';
              console.log(str);
              b64Data =str;
              $('#uploadedImage').val(b64Data); // set image captured by html2canvas
              imgFrameSave(); // Call a function to save your image at server side.
          }
        })

Answer 5

只需使用：

{
    scrollX: -window.scrollX,
    scrollY: -window.scrollY
}

基于：https://github.com/niklasvh/html2canvas/issues/1878#issuecomment-511678281

屏幕外的html2canvas

5 个答案: