Como Convertir el contenido de un Div a Imagen en Angular 10 – Parte 1

Angular Tutoriales | | Comunidad: Crear un Post, Eventos Devs, Foro

Demo

Con Angular podemos crear diferentes aplicaciones y también añadirle funcionalidades como la de poder convertir una capa (div) HTML en una imagen y porque no un botón que permita descargar esta imagen, en este tutorial te enseñare como hacer esto, entre otros detalles, vamos con ello.

Partes

  • Parte 1
  • Parte 2 (Código Fuente GitHub) 

Antes de continuar con este Post, te invito a leer los siguientes artículos:

Asimismo te invito a escuchar el Podcast: “Que Hacer Cuando Estamos En Casa”:

Spotify:Sound Cloud:

Bien ahora continuemos con el Post: Como Convertir el contenido de un Div a Imagen en Angular 10 – Parte 1.

Lo primero que haré es verificar mi versión de Angular, para esto ejecuto el siguiente comando.

Ahora que verificado que estoy trabajando con Angular 10, pasaré a crear un nuevo proyecto, para esto ejecuto el siguiente comando (Podrás ver que esta versión de Angular me pide configurar ciertos detalles antes de iniciar la creación del proyecto)

Luego de crear mi proyecto, Angular me ha creado un conjunto de directorios y archivos necesarios para que la aplicación funcione correctamente, comenzaré trabajando con el archivo app.component.html que se encuentra en angular-convertir-div-imagen > src > app > app.component.html

Entonces abro el archivo app.component.html y creo los elementos para la vista HTML. La vista tiene unos textos con unas imágenes, debajo un botón que al hacer click crea la imagen haciendo uso de la función crearImagen() la cual crearé en el archivo app.component.ts

A continuación veamos como se vería la vista en el navegador.

Parte del desarrollo de software ágil, es usar herramientas que nos permitan crear rápidamente una determinada funcionalidad si es posible, voy a usar el paquete npm html2canvas que hace uso del elemento canvas de HTML 5 para crear una imagen en base al contenido de un div, para instalar este paquete ejecuto el siguiente comando.

Ahora abro el archivo llamado app.component.ts que se encuentra en angular-convertir-div-imagen > src > app > app.component.ts

En el archivo app.component.ts comenzaré importando el uso de Componentes de angular y el paquete html2canvas que instale anteriormente.

Hago uso del selector, templateUrl y styleUrls por defecto que angular me configuro al crear un nuevo proyecto.

Ahora en mi clase AppComponent crearé una variable booleana de nombre imgcreada  con el valor false, esta me servirá para mostrar la imagen una vez que es creada, también creo una variable imagenCreada, abajo creo un método que llamaré crearImagen() dentro de este método hago uso del paquete html2canvas que instalé anteriormente, le digo que seleccione todo el contenido del div con id contenido y lo convierta a imagen, por último, una vez que la imagen es creada, el valor de la variable booleana imgcreada pasa a true para que se muestre la imagen con un botón para descargarla.

Bien hasta aquí es la primera parte de este tutorial, en la segunda y última parte terminaremos de crear el proyecto.

Nota(s)

  • No olvides que debemos utilizar la tecnología para hacer cosas buenas por el mundo. 

Síguenos en las Redes Sociales para que no te pierdas nuestros próximos contenidos. 

Newsletter

Suscríbete a Nuestro Boletín de Novedades:

(Luego de la suscripción no te va salir ningun mensaje. Solo revisa tu bandeja de Correo para confirmar tu suscripción)
* indicates required
Subscribirse
Notificar a
guest
0 Comments
Inline Feedbacks
View all comments