如何将 HTML 转换为 JPG/PNG 图像?我已经尝试了各种选项,但没有一个对我有用,它们只能制作 HTML 某些部分的图像。
html2canvas 示例:
TS
capturar() {
html2canvas(document.body).then(function(canvas) {
document.body.appendChild(canvas);
});
}
HTML
<div id="capture">
<ion-grid class="grid-padding-info-verde">
<ion-row class="row-info">
<ion-col size="12">
<ion-icon name="checkmark-circle" class="check-icono"></ion-icon>
</ion-col>
<ion-col size="12" class="info-col">
<span class="trans-sub"> {{ this.fecha }}</span>
</ion-col>
</ion-row>
</ion-grid>
</div>
“DOMException:无法在‘ShadowRoot’上设置‘adoptedStyleSheets’属性:不允许在多个文档中共享构造的样式表”
您还知道其他工具吗? 基本上我只需要截取屏幕的一部分而不是全屏。有什么想法吗?
最佳答案
您可以使用包:https://www.npmjs.com/package/dom-to-image
在您的页面中:
import domtoimage from 'dom-to-image';
capturar(){
var node = document.getElementById('capture');
var options = {quality: 1};
domtoimage.toJpeg(node, options).then((dataUrl) => {
console.log(dataUrl) //Image in base64 jpeg
});
}
关于javascript - 如何将 HTML 转为 JPG/PNG?在 Javascript/Typescript 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65886015/