屏幕外的html2canvas

Question

在使用html2canvas时,我有一个stackDOM对象(相对定位的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示例.这是关键的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);
    }
});