• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

580
Views
Angular 11 - cómo convertir html a imagen jpeg

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?

almost 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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); }); } }
almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error