Ионная 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>

Это не совсем решение, но оно достаточно для моего использования ...