Como Convertir el contenido de un Div a Imagen en Angular 10 – Parte 2 (Final)

4 minuto(s)

Demo Github

En la parte anterior llamada Como Convertir el contenido de un Div a Imagen en Angular 10 – Parte 1, creamos un nuevo proyecto con Angular 10 y notamos que al crear este nuevo proyecto, Angular nos pide en consola configurar ciertos detalles antes de iniciar la creación del proyecto, como el uso de Angular routing y un formato de hoja de estilos, estamos en Angular 10 y como pudiste ver algunas cosas han cambiado, asimismo creamos la vista del contenido que la aplicación convertirá a imagen presionando un botón, también creamos el código Angular del componente y en esta segunda y última parte terminaremos de crear esta aplicación, 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: “Herramientas Online Para El Trabajo En Equipo”:

Spotify: Sound Cloud:

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

Terminando la Parte 1 de este tutorial creamos el código Angular del componente, pero no compartí el código completo del archivo app.component.ts y ahora te lo comparto.


Bien ahora volvamos a la vista HTML, en la primera parte de este tutorial, creamos el contenido que la aplicación convertirá a imagen y un botón para hacer esta tarea, ahora vamos a crear la vista para el contenido que ya ha sido convertido a imagen, le agregaré una botón para descargar la imagen creada, entonces abrimos el archivo app.component.html que se encuentra en angular-convertir-div-imagen > src > app > app.component.html y agregamos el siguiente código HTML.


En el código HTML anterior, lo que hago es verificar si el valor de la variable imgcreada es true, si es así, pues muestro la imagen creada con un botón para descargar la imagen y por defecto que no se muestre nada aún.

Al botón para descargar la imagen le he agregado el atributo HTML donwload que me permite descargar la imagen como archivo. 

A los botones le agregaré las clases de Bootstrap mx-auto d-block para centrarlos.

Ahora si juntamos todo el código HTML de la Parte 1 y lo juntamos con el de esta Parte 2, pues el código completo sería el siguiente.


Entonces la vista HTML completa se ve de la siguiente manera.

Para la vista he usado clases de Bootstrap 4 para darle un mejor aspecto.

Si tienes problemas con la creación de la imagen, te recomiendo leer las opciones que tiene el paquete html2canvas en el siguiente enlace

Bien eso es todo, puedes ver una demo que esta al inicio de cada parte del tutorial y en esta última parte he colocado el código alojado en un repositorio de GitHub.

Conclusión

Hemos aprendido lo genial que es Angular y lo que podemos crear con el, como una aplicación que convierta el contenido de una capa o div en una imagen. 

Nota (s)

  • El código expuesto en este tutorial, puede quedar obsoleto, continuar o cambiar, esto no depende de mi, si no de los desarrolladores que dan soporte a Angular.
  • Los enlaces expuestos en este tutorial, puede quedar obsoletos, continuar o cambiar, esto no depende de mi, si no de las organizaciones que le dan soporte a sus URLs. 
  • 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.