html2canvas屏幕外 [英] html2canvas offscreen

问题描述

在使用html2canvas时，我有一个stack的DOM对象(相对定位的div，其中包含各种内容)，我希望为其创建单独的缩略图.因此，如果有十个div，我将创建十个缩略图.

In using html2canvas, I have a stack of DOM objects (relative positioned div's that contain various things), that I wish to create individual thumbnails for. So if there are ten divs, I will create ten thumbnails.

其中一些对象将不在屏幕上-每个div都位于一个单独的包含div的区域中，称为"mainDiv".我遍历mainDiv中的div，并分别对每个div执行html2canvas.

Some of these objects will be offscreen --each of these divs are in a single, encompassing div called "mainDiv". I iterate through the divs within mainDiv and execute the html2canvas on each of them individually.

对于那些在屏幕上的用户，这可以正常工作.不在屏幕上的那些不是-它们变回空白.我创建了一个变通办法，将对象滚动到mainDiv的顶部，但这是一种麻烦并且在视觉上不吸引人.

For those that are onscreen, this works fine. Those that are offscreen do not -- they come back blank. I created a workaround that scrolls the objects to the top of the mainDiv, however this is a kludge and visually unappealing.

是否可以指定不可见的DOM对象?理想情况下，我希望能够指定一个包含div并让html2canvas忽略父级可见性，因此我可以对隐藏的对象进行屏幕捕获，但除非如此，我希望对简单的对象进行屏幕捕获滚动到屏幕之外.

Is it possible to specify a DOM object that is not visible? Ideally, I'd like to be able to specify a containing div and have html2canvas ignore the parent visibility, so I can screen capture hidden objects, but barring that, I'd like to be able to screen capture objects that are simply scrolled off screen.

有什么想法吗?谢谢！

----这是一些示例代码.基本上，如果您在一个div中有一堆div，请对其进行迭代.我实际上是这样做recursively的，以便一次只处理一个，回调调用递归函数，所以看起来像这样:

---- Here is some example code. Basically, if you had a bunch of divs within a div, iterate through them. I actually do this recursively so that only one gets processed at a time, with the callback calling the recursive function, so it looks something like this:

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

        }
    })

}

递归调用完成后，它将执行回调函数，该函数将处理图像.

Once the recursive calls are complete, it executes the callback function, which is a function that will do stuff with the images.

同样，只要对象在包含#mainDiv中所有div的滚动div中可见，所有这些工作都很好.但是，一旦div的任何部分向下滚动，它们就会呈现黑色.实际上，如果将两个div的一半向下滚动(一个div的上半部分，下一个div的下半部分)，则它们都将完全变为黑色.

Again, all this works fine as long as the objects are visible within the scrolling div that contains all of the divs in #mainDiv. Once any part of the divs are scrolled off, however, they render black. In fact, if half of two divs are scrolled off (the top half of one, the bottom half of the next), they both render completely black.

推荐答案

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

I know this is an old question but it seemed kind of interesting. Based on my testing it seemed like only position: absolute and position:fixed elements that were outside of the viewport caused this issue. I figured out a solution to the problem.

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

What I'm doing is making a clone of the element. Setting the styling of the clone to left = 0, top = window.innerHeight (so that it won't be inside the window) and position = 'relative'. Then I append the clone to the body, use html2canvas on the clone, and then remove the clone from the body. This solution works for me in IE, Firefox, and Chrome.

我在此处创建了 JSBin示例.这是关键的javascript代码:

I have created a JSBin example here. Here is the key javascript code:

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

这篇关于html2canvas屏幕外的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！