Ionic 4 html2canvas
提问于 2019-02-14 13:02:26
我正在尝试将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);
});
回答 2
Stack Overflow用户
发布于 2019-04-25 16:05:04
我也有同样的问题。我设法通过将我的代码放在<ion-content>标记之外来“修复”它。我猜测html2canvas不会渲染阴影DOM元素( <ion-content>就是这种情况，就像Ionic4一样)。
例如，这将输出一个空画布：
<ion-content>
<div id="capture">
<h1>Test</h1>
</div>
</ion-content>但是下面的方法是可行的：
<div id="capture">
<h1>Test</h1>
</div>这不是一个真正的解决方案，但对我的使用来说已经足够好了……
Stack Overflow用户
发布于 2019-06-19 10:48:36
我也在尝试这个组件，但它不起作用。我找到的解决方案是使用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');
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54691069
复制相关文章
腾讯云开发者
