javascript html2canvas 离屏

html2canvas offscreen

提问by sneuf

In using html2canvas, I have a stackof 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.

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

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.

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

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.

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

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 html2canvasignore 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.

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

Any thoughts, ideas? Thanks!

任何想法，想法？谢谢！

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

---- 这是一些示例代码。基本上，如果一个 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);

        }
    })

}

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

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

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.

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

回答by pseudosavant

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

我知道这是一个老问题，但它似乎很有趣。根据我的测试，似乎只喜欢position: absolute和position:fixed那名视口之外造成这个问题的元素。我想出了解决问题的办法。

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 html2canvason the clone, and then remove the clone from the body. This solution works for me in IE, Firefox, and Chrome.

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

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

我在这里创建了一个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);
    }
});

回答by Anbu

set 'overflow' as visible for all of its parent elements. After rendered remove it

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

CSS

CSS

.overflowVisible{
    overflow:visible !important;
}

JS

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

回答by Maulik

You can use the latest version of html2canvas. This resolves all images pix-elation issues and rendering object issue. I used the version 0.5.0-beta4 by Erik koopmans refer thisand called the html2canvas as below:

您可以使用最新版本的 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.
          }
        })

回答by Harry

Ah now have you tried Div display: none; and Div display: absolute; (or how you'd like your div to appear - maybe z-index)

啊现在你试过 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;
}