Convertir canvas a imagen PNG para descargarla

Publicado por parzibyte en

Los elementos canvas son algo muy útil en HTML, son un lienzo en donde se pueden dibujar varias cosas.

Al generar un contenido en un canvas el mismo puede ser descargado por el usuario, ¿pero qué pasa si queremos agregar más funcionalidad y agregar un botón para descargar el elemento como imagen?

Precisamente eso veremos hoy: cómo convertir el contenido de un canvas a una imagen PNG y hacer que la misma se descargue, usando JavaScript.

Convertir canvas a imagen PNG

Para convertirlo obtenemos referencia al elemento HTML y llamamos al método toDataURL() del canvas. Eso convertirá el canvas a una imagen representada en base 64.

Después de eso creamos un elemento de tipo a, es decir, un link y como href le ponemos la cadena en base 64, eso hará que se abra un enlace con la imagen.

También indicamos el atributo download para establecer un título cuando se descargue.

Finalmente, al tener el enlace, hacemos click en él llamado al método click y eso es lo único que se necesita.

Ejemplo

Tenemos el siguiente código HTML con un canvas que tiene el id canvas y un botón, al hacer click en el botón vamos a descargar el canvas como imagen PNG.

El código JavaScript es el siguiente:

Puedes probarlo aquí.

Conclusión

Con esto podremos capturar un canvas como imagen. Así, se podría tomar una captura de un videojuego, descargar una foto o cualquier otra cosa que se pinte en un canvas.

Este “truco” lo utilizo en el generador de diagramas UML que hice hace algún tiempo, y lo usaré en futuros tutoriales que estoy preparando.


parzibyte

He trabajado por más de 4 años en el desarrollo de software con experiencia en Java, PHP, JavaScript, HTML, Node.JS, Python, Android y Go. También he trabajado con bases de datos SQL como MySQL y SQLite, así como con bases de datos NoSQL usando MongoDB.Soy bueno utilizando algunos frameworks y herramientas como Firebase, jQuery, AngularJS, VueJS, CodeIgniter, Laravel, BulmaCSS, Bootstrap y Electron.Otros términos que conozco son: Arduino, GraphQL, API's, REST, AJAX, PouchDB, CouchDB, Experiencia de usuario, buenas prácticas de programación, Webpack, NPM, Administración de servidores y programación de scriptsLa plataforma en la que tengo más experiencia es la web, pero en mis ratos libres realizo unos pequeños ejercicios en C# y C.Estoy aquí para ayudarte a resolver tus problemas de programación y depuración :-)

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

A %d blogueros les gusta esto: