I would like to know when html2canvas as fully rendered the capture and I can clean up changes I have made to the page.

If I reset style and position without a delay I get a half-resolution capture.

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 = '';
  */
});

}

I would like to know when html2canvas as fully rendered the capture and I can clean up changes I have made to the page.

If I reset style and position without a delay I get a half-resolution capture.

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 = '';
  */
});

}

• javascript
• html2canvas

2 Answers 2

In html2canvas 0.4 and below versions was used callback method 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./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

Use the onrendered callback:

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

source: https://html2canvas.hertzen./documentation.html