Javascript html2canvas屏幕外

在使用html2canvas时，我有一个DOM对象的

堆栈

（包含各种内容的相对定位div），我希望为其创建单独的缩略图。因此，如果有十个div，我将创建十个缩略图

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

对于那些在屏幕上的人来说，这很好。那些在屏幕外的没有——它们返回时是空白的。我创建了一个变通方法，可以将对象滚动到

mainDiv

的顶部，但是这是一个混乱的问题，在视觉上没有吸引力

是否可以指定不可见的DOM对象？理想情况下，我希望能够指定一个包含div并让

html2canvas

忽略父级可见性，这样我就可以截屏隐藏的对象，但除此之外，我希望能够截屏仅从屏幕上滚动的对象

有什么想法吗？谢谢

----下面是一些示例代码。基本上，如果在一个div中有一堆div，则迭代它们。实际上，我是递归地执行此操作的，这样一次只处理一个，回调调用递归函数，所以看起来像这样：

  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的一半被滚动掉（一个div的上半部分，下半部分），它们都会呈现完全黑色。

我知道这是一个老问题，但它似乎有点有趣。根据我的测试，似乎只有

position:absolute

和

position:fixed

视口之外的元素导致了这个问题。我想出了解决这个问题的办法

我正在做的是克隆元素。将克隆的样式设置为

left=0

，

top=window.innerHeight

（使其不在窗口内）和

position='relative'

。然后我将克隆附加到主体中，对克隆使用

html2canvas

，然后从主体中删除克隆。这个解决方案适用于IE、Firefox和Chrome

我创造了一个新的世界。以下是关键的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);
    }
});

---

啊，现在你有没有试过Div display:none；和Div显示：绝对；（或者您希望div的显示方式-可能是z-index）

---

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

CSS

JS

---

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

$（'html，body'）。滚动顶部（0）；//在调用html2canvas之前，将/html置于最上面的位置
html2canvas（$（“我的部门”）{
乌塞科尔斯：没错，
新闻部：200，
onrendered：函数（画布）{
var str=canvas.toDataURL（“image/png”）；
var contentType='image/png'；
console.log（str）；
b64Data=str；
$（'#uploadeImage'）.val（b64Data）；//设置html2canvas捕获的图像
imgFrameSave（）；//调用函数在服务器端保存图像。
}
})

只需使用：

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

---

基于：

请附上一些代码示例。@sneuf这是针对任何特定浏览器的，还是您在不同浏览器中都看到了这种行为？很好地理解了这一点。我想这应该是公认的答案。谢谢你！！此处不工作：由于某些原因，div中的所有内容都没有正确克隆。@cmbarbu您能提供更多详细信息吗？你用的是什么浏览器？你能设置一个jsbin来重现这个问题吗？@pseudosavant我现在没有太多的动机来设置jsbin，因为我找到了一个更好的解决方案：它是Flot中的一个情节，更简单，而且作为一个缩影完全复制它看起来更好。如果我回到那个解决方案，我会问另一个问题，无论如何，谢谢ScrollTop工作！！！

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

$('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.
          }
        })

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