html2canvas 离屏

Posted 2023-03-05

【中文标题】html2canvas 离屏

【英文标题】：html2canvas offscreen

【发布时间】：2012-11-15 11:50:37

【问题描述】：

在使用 html2canvas 时，我有一个 stack 的 DOM 对象（包含各种内容的相对定位的 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 的一半被滚动（一个的上半部分，下一个的下半部分），它们都呈现完全黑色。

【问题讨论】：

请附上一些代码示例。

@sneuf 这是针对任何特定浏览器的，还是您在浏览器中看到这种行为？

【参考方案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);
    
);

【讨论】：

这个不错。 IMO 这应该是公认的答案。

感谢伪专家！！

在这里不工作：由于某种原因，并非 div 中的所有内容都被正确克隆。

@cmbarbu 你能提供更多细节吗？你使用的是什么浏览器？你能设置一个重现问题的 jsbin 吗？

@pseudosavant 我现在没有太大的动力来设置一个 jsbin，因为我找到了一个更好的解决方案：它是 Flot 中的一个情节，它更容易，并且将它完全重新绘制为一个缩影看起来更好.如果我回到那个解决方案，我会问另一个问题，无论如何谢谢

【参考方案2】：

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

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");
        );
    
);

【参考方案3】：

您可以使用最新版本的 html2canvas。这解决了所有图像像素化问题和渲染对象问题。我使用了 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.
          
        )

【参考方案4】：

啊，现在你有没有试过 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;

【参考方案5】：

只需使用：

    scrollX: -window.scrollX,
    scrollY: -window.scrollY

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