Angular 11 - how to convert html to jpeg image

Question

I tried using following code

const element = document.getElementbyId('myid'); // it takes little long to render
htmlToImage.jpeg(element, { quality: 0.95 })
      .then((dataUrl) => {
        console.log(dataUrl); // this prints only data:,
})

As dataUrl is blank image is blank. So I tried using htmlToCanvas

 html2canvas(element).then(function (canvas) {
      // Convert the canvas to blob
      canvas.toBlob(function (blob) {
    
  })

but i am getting an error Error loading image http://localhost:4200/

Ho to convert HTML element to an image file?

Answer 1

Step 1 – Create a new Angular 11 app Step 2 – Install html-to-image Package Step 3 – Add HTML into a view file Step 4 – Add code in Component .ts file Step 5 – Run Angular app

<div id="image-section">
  <h1>Hello world!</h1>
</div>
 
<button type="button" (click)="generateImage()">Create Image</button>

ts=>

import { Component } from '@angular/core';
import * as htmlToImage from 'html-to-image';
 
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'my-new-app';
 
  generateImage(){
    var node:any = document.getElementById('image-section');
    htmlToImage.toPng(node)
      .then(function (dataUrl) {
        var img = new Image();
        img.src = dataUrl;
        document.body.appendChild(img);
      })
      .catch(function (error) {
        console.error('oops, something went wrong!', error);
      });
  }
}