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