Hvordan overføre HTML til JPG/PNG? I Javascript/Typescript

Hvordan kan jeg konvertere en HTML til et JPG/PNG-bilde? Jeg har allerede prøvd ulike alternativer, men ingen fungerer for meg, de lager bare bilde av noen deler av HTML-en.

Eksempel med 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>

Denne feilen får jeg når jeg bruker eksemplet:

"DOMException: Klarte ikke å sette 'adoptedStyleSheets'-egenskapen på 'ShadowRoot': Deling av konstruerte stilark i flere dokumenter er ikke tillatt"

Kjenner du til noen andre verktøy? I utgangspunktet trenger jeg å ta et skjermbilde av bare en del av skjermen, ikke hele skjermen. Noen ideer?

Svar #1

Du kan bruke pakken: https://www.npmjs.com/package/dom-to-image

På siden din:

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
    });
}

Relaterte artikler