HTML2Canvas generating blank image in Ionic4 angular proj. No error in console. Same code generates proper image in plain html/javascript

Question

I have html2canvas installed and imported in home.page.ts in my Ionic4 angular test project. I have a plain 100px X 100px, yellow background div with a single line of text. I am passing this div to html2canvas to be downloaded as png. html2canvas is listing all steps (no errors) in the console and generating the png with the same size as the given div but the div is empty.It does not have the color of the div or the text.

Changing the size of the div takes effect properly meaning the generated image has the same size as the div. This test project demonstrate the issue - https://stackblitz.com/edit/html2cavasionic4test.

Here is my home.page.ts

import { Component } from '@angular/core';
import * as html2canvas from 'html2canvas';


@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  selected = 1;
  list: any = [{ id: 0, text: '0' }, { id: 1, text: 1 }];
  changed(e) {
    console.log(this.selected);
  }
  onPrintClicked(){
    let div = document.getElementById("h2cTest");
    const options = {allowTaint:true, background: "yellow", height: div.clientHeight, width: div.clientWidth };
    html2canvas.default(div, options)
    .then((canvas)=>{
      var myImage = canvas.toDataURL("image/png");
      console.log("image done");
      this.downloadURI("data:" + myImage, "yourImage.png");
    })
    .catch(()=>{})
  }
  downloadURI(uri, name) {
    var link = document.createElement("a");
    link.download = name;
    link.href = uri;
    link.click();
    //after creating link you should delete dynamic link
    //clearDynamicLink(link); 
  }

}

On my local machine I created a plain html/javascript page with the same functionality as in the stackblitz project above and included the script html2canvs.min.js on the page. This simple page is working as expected and generating proper image.

html2Canvas is expected to generate the image of the div but it is generating blank image. Is there something wrong with the setup?

Update

App tag was the problem.

Answer 1

https://www.npmjs.com/package/dom-to-image -> works better than html2canvas https://www.npmjs.com/package/jspdf ->if you need to save to pdf

page.ts

import * as jsPDF from 'jspdf'; 
//or     import jsPDF from 'jspdf'; 
import domtoimage from 'dom-to-image';

captureScreen() {
  const div = document.getElementById('pdfContent');
  const divHeight = div.clientHeight;
  const divWidth = div.clientWidth;
  const options = { background: 'white', width: divWidth, height: divHeight };

  domtoimage.toPng(div, options).then((imgData) => {
    const doc = new jsPDF('p', 'mm', [divWidth, divHeight]);
    const imgProps = doc.getImageProperties(imgData);
    const pdfWidth = doc.internal.pageSize.getWidth();
    const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
    doc.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);
    doc.save('pdfDocument.pdf');
  });
}

page.html

<ion-button (click)="captureScreen('pdfContent')">
  <ion-icon name="print" size='small' slot="icon-only"></ion-icon>
</ion-button>

<div id="pdfContent">
  <h1>Testing this to pdf</h1>
</div>

worked on ionic 5 (see more here image-in-ionic4-angular)

Note: current version of jsPDF is giving errors. This is npm install jspdf@1.5.3 --save working ok

You can see the example here of the site:

and of the generated pdf