Question

我想知道什么时候html2canvas完全呈现捕获，我可以清理我对页面所做的更改。

如果我没有延迟地重置样式和位置，我会获得半分辨率捕获。

html2canvas(srcEl,
  {
    canvas: scaledCanvas,
    width: originalWidth,
    height: originalHeight
  }).then(function (canvas) {
  var a = document.createElement("a");
  a.download = "chart.png";
  a.href = canvas.toDataURL("image/png");
  document.body.appendChild(a);
  a.click();
  /*
  srcEl.style.position = '';
  srcEl.style.left = '';
  srcEl.style.top = '';
  */
});

}

Answer 1

使用onrendered回调：

html2canvas(element, {
    onrendered: function(canvas) {
        // canvas is the final rendered <canvas> element
    }
});

来源：https://html2canvas.hertzen.com/documentation.html

Answer 2

在html2canvas 0.4及以下版本中使用了回调方法onrendered。 Old documentation在0.5之后，它被重写为使用Promises New documentation。

Old way

window.takeScreenShot = function() {
    html2canvas(document.getElementById("target"), {
        onrendered: function (canvas) {
            document.body.appendChild(canvas);
        }     
    });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>

<div id="target">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis eleifend elit. Donec lectus sem, scelerisque sit amet facilisis quis, gravida a lacus. Nunc at lorem egestas, gravida lorem quis, pulvinar ante. Quisque id tempus libero. Mauris hendrerit nunc risus, ac laoreet lectus gravida et. Nam euismod magna ac enim posuere sagittis. Fusce at egestas enim, eu hendrerit enim.
</div>

<button onclick="takeScreenShot()">to image</button>

New way

我如何知道何时完成html2canvas？

2 个答案: