Ionic 爱奥尼亚4

j91ykkif 于 2023-02-27 发布在 Ionic

关注(0)|答案(3)|浏览(181)

我尝试在Ionic 4应用程序中将HTML捕获到图像。我尝试使用html2canvas，但它不起作用，并在控制台中显示以下输出：

这是我的代码：

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

ionic-framework

来源：https://stackoverflow.com/questions/54691069/ionic-4-html2canvas

3条答案

按热度按时间

qni6mghb1#

我也遇到了同样的问题。我设法通过把代码从<ion-content>标签中取出来“修复”它。我猜html2canvas不呈现阴影DOM元素（<ion-content>的情况就是如此，从Ionic 4开始）。
例如，这将输出一个空画布：

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

但以下方法有效：

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

这不是一个真正的解决方案，但它对我来说已经足够好了...

赞(0）回复(0）举报 2023-02-27

rfbsl7qr2#

我也尝试过这个组件，但它不起作用。我找到的解决方案是使用dom-to-image库。我附上了一个我所做的例子。你只需要把你想要转换的文件扩展名。
https://www.npmjs.com/package/jspdf
https://www.npmjs.com/package/dom-to-image

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

exportPdf(){
    const div = document.getElementById('pdf');
    const options = { background: 'white', height: 845, width: 595 };
    domtoimage.toPng(div, options).then((dataUrl) => {
        //Initialize JSPDF
        const doc = new jsPDF('p', 'mm', 'a4');
        //Add image Url to PDF
        doc.addImage(dataUrl, 'PNG', 0, 0, 210, 340);
        doc.save('pdfDocument.pdf');
    }
}

赞(0）回复(0）举报 2023-02-27

kpbwa7wx3#

最新的html2canvas支持阴影dom，比如https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js

赞(0）回复(0）举报 2023-02-27