#dom-to-image将屏幕下div导出为image

Question

我正在使用dom- to -image库(和downloadjs库)在我的网站上拍摄div的快照。

我正在使用这个方法：

domtoimage.toPng(document.getElementById('myDiv'))
.then(function (dataUrl) {
    download(dataUrl, 'myDiv.png');
});

问题是，我想导出的div不在屏幕上，也就是说，它具有以下css属性：

.myDiv {
    width: 100px;
    height: 100px;
    background: red;
    position: absolute;
    left: -100px;
    top: 0;
}

并且该方法导出一个空图像。

你有什么办法来解决这个问题吗？有没有其他方法可以从屏幕上隐藏div，我可以尝试一下？

如果可能的话，我希望避免使用z-index css属性;)

Answer 1

在拍摄快照之前，可以应用使div在视口中可见的样式。

​

domtoimage.toPng(document.getElementById('myDiv'), {
  style: {
    'left': '0px'
  }
}).then(function(dataUrl) {
  var img = new Image();
  img.src = dataUrl;
  document.getElementById('result').appendChild(img);
  //download(dataUrl, 'myDiv.png');
});

.myDiv {
  width: 100px;
  height: 100px;
  background: red;
  position: absolute;
  left: -100px;
  top: 0;
}

#result {
  position: absolute;
  left: 200px;
  top: 50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.6.0/dom-to-image.js"></script>
<div id="myDiv" class="myDiv">
  test
</div>

<div id="result">
</div>

​