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.
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.
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í.
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.
La impresión de un PDF en cualquier impresora se puede automatizar con un bot de…
Hoy te enseñaré cómo enviar un mensaje a un usuario desde un bot de Telegram…
El día de hoy te enseñaré algo muy sencillo pero útil al programar con PHP:…
El plugin para imprimir en impresoras térmicas alcanza hoy su versión 3.4.0 agregando soporte para…
En ocasiones es necesario leer los pixeles y colores de una imagen con JavaScript del…
Siguiendo con los tutoriales de listas desplegables o select con JavaScript, vamos a ver cómo…
Esta web usa cookies.
Ver comentarios
Siempre encuentro esta misma solución, pero no consigo que funcione en dispositivos móviles como los teléfono. Ya sea Android o iPhone. Por ejemplo en iphone descarga un "document" sin extensión y vacío.
Esta solución sólo consigo que me funcione en navegador de escritorio.
¿podrían echarme una mano para hacerlo funcionar en un dispositivo móvil?
Muchas gracias.
Yo acabo de probar y funciona perfectamente