HTML2Canvas 在 Ionic4 角度项目中生成空白图像。控制台中没有错误。相同的代码在纯 html/javascript 中生成正确的图像

我在 Ionic4 角度测试项目中安装了 html2canvas 并将其导入到 home.page.ts 中。我有一个普通的 100px X 100px、黄色背景 div，带有一行文本。我将此 div 传递给 html2canvas 以下载为 png 格式。 html2canvas 在控制台中列出所有步骤（没有错误），并生成与给定 div 大小相同的 png，但 div 是空的。它没有 div 或文本的颜色。

更改 div 的大小会正确生效，这意味着生成的图像与 div 具有相同的大小。这个测试项目演示了这个问题 -https://stackblitz.com/edit/html2cavasionic4test https://stackblitz.com/edit/html2cavasionic4test.

这是我的 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); 
  }

}

在我的本地计算机上，我创建了一个纯 html/javascript 页面，其功能与上面的 stackblitz 项目相同，并在页面上包含脚本 html2canvs.min.js。这个简单的页面按预期工作并生成正确的图像。

html2Canvas 预计会生成 div 的图像，但它正在生成空白图像。是不是设置有问题？

Update

应用程序标签是问题所在。

https://www.npmjs.com/package/dom-to-image https://www.npmjs.com/package/dom-to-image-> 比 html2canvas 效果更好https://www.npmjs.com/package/jspdf https://www.npmjs.com/package/jspdf->如果您需要保存为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');
  });
}

页面.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>

曾参与 ionic 5 （在这里查看更多离子四角图像 https://stackoverflow.com/questions/54650369/html2canvas-generating-blank-image-in-ionic4-angular-proj-no-error-in-console/63670250#63670250)

注意：当前版本的 jsPDF 出现错误。 这是npm install [email protected] /cdn-cgi/l/email-protection --save工作正常

You can see the example here of the site:

以及生成的 pdf