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?
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?
Share Improve this question asked Dec 29, 2021 at 10:36 yogyog 2092 gold badges4 silver badges22 bronze badges 2- var node:any = document.getElementById('myid'); 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); }); } – anis Commented Dec 29, 2021 at 10:39
- u are using html-to-image Pacakge?? – anis Commented Dec 29, 2021 at 10:40
1 Answer
Reset to default 6Step 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.ponent.html',
styleUrls: ['./app.ponent.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);
});
}
}