HTML2Canvas在Ionic4角投影中生成空白图像.控制台中没有错误.相同的代码以纯html/javascript生成正确的图像 [英] HTML2Canvas generating blank image in Ionic4 angular proj. No error in console. Same code generates proper image in plain html/javascript

问题描述

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

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.

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

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.

这是我的home.page.ts

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); 
  }

}

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

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会生成div的图像，但它会生成空白图像.设置有问题吗?

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

更新

应用标签是问题所在.

推荐答案

https: //www.npmjs.com/package/dom-to->图片比html2canvas效果更好 https://www.npmjs.com/package/jspdf ->如果需要保存为pdf

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'; 
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

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>

致力于离子5 (请参见此处 image-in-ionic4-angular )

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

注意:当前jsPDF版本给出了错误. npm install jspdf@1.5.3 --save可以正常工作

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:

以及生成的pdf

这篇关于HTML2Canvas在Ionic4角投影中生成空白图像.控制台中没有错误.相同的代码以纯html/javascript生成正确的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！