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

5 minuto(s)

En esta página:

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.


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

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)


# 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

# 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


/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

/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


<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>

<p class="lead">En <a href="https://nubecolectiva.com/" target="_blank"> Nube Colectiva </a> hablamos sobre:</p>

</div>

<h3>Frontend</h3>

</a>

</div>

<h3>Backend</h3>

</a>

</div>

<h3>Android</h3>

</a>

</div>

<h3>Otros</h3>

</a>

</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.


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

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


/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

/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.


import { Component } from '@angular/core';
import html2canvas from "html2canvas";

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.


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

@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.


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;
  }

}