Ionic 4 html2canvas

Question

I'm trying to capture HTML to image in an Ionic 4 app. I tried using html2canvas, however, it doesn't work and shows this output in the console:

This is my code:

var element = document.getElementById('capture');
  html2canvas(element).then(canvas => {
    var imgData = canvas.toDataURL("image/png");
    this.socialSharing.share(null, null, imgData);
});

Answer 1

I'm having the same issue. I managed to "fix" it by putting my code out of the <ion-content> tag. My guess is that html2canvas doesn't render shadow DOM elements (which is the case of <ion-content>, as of Ionic 4).

For instance this outputs an empty canvas:

<ion-content>
  <div id="capture">
    <h1>Test</h1>
  </div>
</ion-content>

But the following works:

<div id="capture">
  <h1>Test</h1>
</div>

This is not really a solution, but it's good enough for my use...