javascript - How do I know when html2canvas is done? - Stack Overflow

admin管理员组

文章数量:1389982

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

Share Improve this question Follow asked Feb 21, 2017 at 2:11 InterlatedInterlated 5,9561010 gold badges5353 silver badges8787 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 1

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

本文标签： javascriptHow do I know when html2canvas is doneStack Overflow