23

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

其中一些对象将在屏幕外——这些 div 中的每一个都位于一个名为“mainDiv”的包含 div 中。我遍历 mainDiv 中的 div 并分别在每个 div 上执行 html2canvas。

对于那些在屏幕上的人来说，这很好用。那些不在屏幕上的则不会——它们会返回空白。我创建了一个解决方法，将对象滚动到mainDiv.

是否可以指定不可见的 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 的一半被滚动（一个的上半部分，下一个的下半部分），它们都呈现完全黑色。

4

5 回答 5

28

我知道这是一个老问题，但它似乎有点有趣。根据我的测试，似乎只有视口之外position: absolute的position:fixed元素导致了这个问题。我想出了解决问题的办法。

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

我在这里创建了一个 JSBin 示例。这是关键的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);
    }
});
于 2014-08-27T21:02:16.620 回答
4

将“溢出”设置为对其所有父元素可见。渲染后删除它

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");
        });
    }
});
于 2016-08-18T10:34:29.940 回答
2

您可以使用最新版本的 html2canvas。这解决了所有图像像素化问题和渲染对象问题。我使用了 Erik koopmans 的 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.
          }
        })
于 2018-06-11T08:58:49.467 回答
0

啊现在你试过 Div display: none; 和 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;
}
于 2014-12-14T05:32:34.583 回答
0

只需使用：

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

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

于 2021-04-30T20:50:47.310 回答