How to pass HTML to JPG PNG In Javascript Typescript

0 votes

How can i convert an HTML to a JPG/PNG image? I already tried various options but none works for me, they only make the image of some parts of the HTML.

Example with 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>

This error I get when I use the example: enter image description here

"DOMException: Failed to set the 'adoptedStyleSheets' property on 'ShadowRoot': Sharing constructed stylesheets in multiple documents is not allowed"

Do you know any other tools? Basically I need to take a screenshot of only a part of my screen not the full screen. Any ideas?

Jun 16, 2022 in TypeSript by Logan
• 2,140 points
1,527 views

1 answer to this question.

0 votes

You can use the package: https://www.npmjs.com/package/dom-to-image

In your page:

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
    });
}
answered Jun 22, 2022 by Nina
• 3,060 points

Related Questions In TypeSript

0 votes
1 answer

How to declare and initialize a Dictionary in Typescript

Apparently this doesn't work when passing the ...READ MORE

answered May 31, 2022 in TypeSript by Nina
• 3,060 points
5,453 views
0 votes
1 answer

How to use moment.js library in angular 2 typescript app?

REFERENCE: https://momentjs.com/docs/#/use-it/typescript/ You can install this by using: npm install ...READ MORE

answered Jun 1, 2022 in TypeSript by Nina
• 3,060 points
1,281 views
0 votes
1 answer

How to create enum type in TypeScript?

TypeScript 0.9+ has a specification for enums: enum ...READ MORE

answered Jun 8, 2022 in TypeSript by Nina
• 3,060 points
577 views
0 votes
1 answer

How to install and run Typescript locally in npm?

It took me a while to figure ...READ MORE

answered Jun 8, 2022 in TypeSript by Nina
• 3,060 points
3,550 views
0 votes
0 answers

ngx-image-cropper imageloaded() not passing any image data to typescript file event method

I'm using ngx-image-cropper to load and crop images. According ...READ MORE

Jul 5, 2022 in TypeSript by Logan
• 2,140 points
1,187 views
0 votes
1 answer

What are the vulnerability related to PHP Form?

Hii, The $_SERVER["PHP_SELF"] variable can be used by ...READ MORE

answered Feb 13, 2020 in PHP by Niroj
• 82,880 points
2,691 views
+1 vote
1 answer

How can we send message multiple time to a specific person or group in whatsapp using loop?

Hii @kartik,  This is simple task to send single ...READ MORE

answered Feb 28, 2020 in Java-Script by Niroj
• 82,880 points
17,309 views
0 votes
1 answer

Why it is necessary to refresh CSRF token per form request?

Hello, Generating a new CSRF token for each ...READ MORE

answered Mar 19, 2020 in Laravel by Niroj
• 82,880 points
4,096 views
0 votes
1 answer

How to read local csv file in JavaScript/TypeScript?

Here is how to use the readAsBinaryString() from the FileReader API ...READ MORE

answered Jun 9, 2022 in TypeSript by Nina
• 3,060 points
2,164 views
0 votes
1 answer

How to create ES6 Map in Typescript

Refer this as an example this.configs = new ...READ MORE

answered May 31, 2022 in TypeSript by Nina
• 3,060 points
386 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP