離子4 html2canvas

Question

我正在嘗試捕獲HTML以在Ionic 4應用程序中成像。 我嘗試使用html2canvas ，但是它不起作用，並在控制台中顯示以下輸出：

這是我的代碼：

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

Answer 1

我也嘗試過此組件，但是它不起作用。 我發現的解決方案是使用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');
    }
}

Answer 2

我有同樣的問題。 我設法通過將代碼放在<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>

這並不是真正的解決方案，但足以供我使用...