javascript - 如何将 HTML 转为 JPG/PNG？在 Javascript/Typescript 中

Question

如何将 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’属性:不允许在多个文档中共享构造的样式表”

您还知道其他工具吗？基本上我只需要截取屏幕的一部分而不是全屏。有什么想法吗？

Answer 1

您可以使用包: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
    });
}