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

问题

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.

来源：https://stackoverflow.com/questions/54650369/html2canvas-generating-blank-image-in-ionic4-angular-proj-no-error-in-console

标签

typescript

html2canvas

ionic4