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:
- Las Novedades más destacadas que trae Angular 10
- Como usar el Componente Google Maps de Angular 9
- Creando una Aplicación Web similar a SoundCloud con Ruby on Rails 6 y Angular 10 – Parte 1
- Como usar el Componente YouTube de Angular 9
- 5 Herramientas para el trabajo con Angular en este 2020
- Puedes leer más en la categoría Angular
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
ng v _ _ ____ _ ___ / \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _| / ? \ | '_ \ / _` | | | | |/ _` | '__| | | | | | | / ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | | /_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___| |___/ Angular CLI: 10.0.4 Node: 10.13.0 OS: win32 ia32 Angular: 10.0.5 ... animations, common, compiler, compiler-cli, core, forms ... platform-browser, platform-browser-dynamic, router Ivy Workspace: Yes Package Version ----------------------------------------------------------- @angular-devkit/architect 0.1000.4 @angular-devkit/build-angular 0.1000.4 @angular-devkit/build-optimizer 0.1000.4 @angular-devkit/build-webpack 0.1000.4 @angular-devkit/core 10.0.4 @angular-devkit/schematics 10.0.4 @angular/cli 10.0.4 @ngtools/webpack 10.0.4 @schematics/angular 10.0.4 @schematics/update 0.1000.4 rxjs 6.5.5 typescript 3.9.7 webpack 4.43.0 |
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)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
# Creo un nuevo proyecto ng new angular-convertir-div-imagen # Nos pregunta si queremos usar Angular routing, le diré que si Would you like to add Angular routing? (y/N) Yes # Nos pide elegir un formato de estilos CSS, yo elijo CSS Which stylesheet format would you like to use? (Use arrow keys) > CSS SCSS [ https://sass-lang.com/documentation/syntax#scss ] Sass [ https://sass-lang.com/documentation/syntax#the-indented-syntax ] Less [ http://lesscss.org ] Stylus [ http://stylus-lang.com ] CREATE test-app/angular.json (3582 bytes) CREATE test-app/package.json (1251 bytes) CREATE test-app/README.md (1025 bytes) (Continua la instalación ... ) # Ingreso al directorio del proyecto que he creado cd angular-convertir-div-imagen |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
/angular-convertir-div-imagen ├── /e2e ├── /node_modules ├── /src ├── /app ├── app-routing.module.ts ├── app.component.css ├── app.component.html // Abre este archivo ├── app.component.spec.ts ├── app.component.ts ├── app.module.ts ├── /assets ├── /environments ├── favicon.ico ├── index.html ├── main.ts ├── polyfills.ts ├── styles.css ├── test.ts ├── .browserslist ├── .editorconfig ├── .gitignore ├── angular.json ├── karma.conf.js ├── package-lock.json ├── package.json ├── README.md ├── tsconfig.app.json ├── tsconfig.base.json ├── tsconfig.json ├── tsconfig.spec.json ├── tslint.json |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<div id="contenido"> <div class="row text-center"> <div class="col-md-12"> <p class="lead">En <a href="https://nubecolectiva.com/" target="_blank"> Nube Colectiva </a> hablamos sobre:</p> </div> </div> <div class="row text-center"> <div class="col-md-3"> <h3>Frontend</h3> <a href="https://blog.nubecolectiva.com/category/frontend/" target="_blank"> <img class="img-fluid" src="assets/img/frontend.png"> </a> </div> <div class="col-md-3"> <h3>Backend</h3> <a href="https://blog.nubecolectiva.com/category/backend/" target="_blank"> <img class="img-fluid" src="assets/img/backend.png"> </a> </div> <div class="col-md-3"> <h3>Android</h3> <a href="https://blog.nubecolectiva.com/category/android/" target="_blank"> <img class="img-fluid" src="assets/img/android.png"> </a> </div> <div class="col-md-3"> <h3>Otros</h3> <a href="https://blog.nubecolectiva.com/category/articulos/" target="_blank"> <img class="img-fluid" src="assets/img/otros.png"> </a> </div> </div> </div> <button type="button" class="btn btn-primary mt-3 mb-5" (click)="crearImagen()">Crear Imagen</button> |
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.
|
1 2 3 4 5 6 7 |
npm i html2canvas --save + html2canvas@1.0.0-rc.5 added 3 packages from 1 contributor and audited 1465 packages in 22.955s found 0 vulnerabilities |
Ahora abro el archivo llamado app.component.ts que se encuentra en angular-convertir-div-imagen > src > app > app.component.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
/angular-convertir-div-imagen ├── /e2e ├── /node_modules ├── /src ├── /app ├── app-routing.module.ts ├── app.component.css ├── app.component.html ├── app.component.spec.ts ├── app.component.ts // Abre este archivo ├── app.module.ts ├── /assets ├── /environments ├── favicon.ico ├── index.html ├── main.ts ├── polyfills.ts ├── styles.css ├── test.ts ├── .browserslist ├── .editorconfig ├── .gitignore ├── angular.json ├── karma.conf.js ├── package-lock.json ├── package.json ├── README.md ├── tsconfig.app.json ├── tsconfig.base.json ├── tsconfig.json ├── tsconfig.spec.json ├── tslint.json |
En el archivo app.component.ts comenzaré importando el uso de Componentes de angular y el paquete html2canvas que instale anteriormente.
|
1 2 3 4 |
import { Component } from '@angular/core'; import html2canvas from "html2canvas"; |
Hago uso del selector, templateUrl y styleUrls por defecto que angular me configuro al crear un nuevo proyecto.
|
1 2 3 4 5 6 7 |
@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
export class AppComponent { titulo = 'Como Convertir el contenido de un Div a Imagen en Angular 10'; imgcreada = false; imagenCreada; constructor() { } crearImagen() { html2canvas(document.querySelector("#contenido")).then(canvas => { this.imagenCreada = canvas.toDataURL(); }); this.imgcreada = true; } } |
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.