Intenté usar el siguiente código
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:, })Como dataUrl está en blanco, la imagen está en blanco. Así que intenté usar htmlToCanvas
html2canvas(element).then(function (canvas) { // Convert the canvas to blob canvas.toBlob(function (blob) { }) pero recibo un error Error loading image http://localhost:4200/
¿Cómo convertir un elemento HTML en un archivo de imagen?
Paso 1: cree una nueva aplicación Angular 11 Paso 2: instale el paquete html-to-image Paso 3: agregue HTML en un archivo de vista Paso 4: agregue código en el archivo de componente .ts Paso 5: ejecute la aplicación Angular
<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); }); } }