我尝试在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);
});
3条答案
按热度按时间qni6mghb1#
我也遇到了同样的问题。我设法通过把代码从
<ion-content>
标签中取出来“修复”它。我猜html2canvas不呈现阴影DOM元素(<ion-content>
的情况就是如此,从Ionic 4开始)。例如,这将输出一个空画布:
但以下方法有效:
这不是一个真正的解决方案,但它对我来说已经足够好了...
rfbsl7qr2#
我也尝试过这个组件,但它不起作用。我找到的解决方案是使用dom-to-image库。我附上了一个我所做的例子。你只需要把你想要转换的文件扩展名。
https://www.npmjs.com/package/jspdf
https://www.npmjs.com/package/dom-to-image
kpbwa7wx3#
最新的html2canvas支持阴影dom,比如https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js