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 in TypeSript by Logan
• 1,580 points
10 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 6 days ago by Nina
• 2,900 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 in TypeSript by Nina
• 2,900 points
36 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 in TypeSript by Nina
• 2,900 points
15 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 in TypeSript by Nina
• 2,900 points
17 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 in TypeSript by Nina
• 2,900 points
31 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,720 points
1,137 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,720 points
5,487 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,720 points
2,748 views
0 votes
1 answer

What is meant by passing the variable by value and reference in PHP?

Hello, When the variable is passed as value ...READ MORE

answered Mar 27, 2020 in PHP by Niroj
• 82,720 points
1,380 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 in TypeSript by Nina
• 2,900 points
5 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 in TypeSript by Nina
• 2,900 points
17 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP