我怎么知道 html2canvas 何时完成？

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 after 0.5 it was rewritten to use 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 何时完成？

How do I know when html2canvas is done?

javascript

html2canvas