javascript

Convertir canvas a imagen PNG para descargarla

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.

<!DOCTYPE html>
<html>

<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width">
 <title>Canvas a imagen</title>
 <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
 <h1>Canvas a PNG</h1>
 <canvas id="canvas"></canvas>
 <button id="btnDescargar">Descargar</button>
    <script src="script.js"></script>
  </body>
</html>

El código JavaScript es el siguiente:

const $canvas = document.querySelector("#canvas"),
$btnDescargar = document.querySelector("#btnDescargar");

// Lo siguiente dibuja en el canvas, no tiene que ver con el tutorial, solo es demostración
const contexto = $canvas.getContext("2d");
contexto.beginPath();
contexto.arc(95, 50, 40, 0, 2 * Math.PI);
contexto.stroke();

// Listener del botón
$btnDescargar.addEventListener("click", () => {
      // Crear un elemento <a>
      let enlace = document.createElement('a');
      // El título
      enlace.download = "Canvas como imagen.png";
      // Convertir la imagen a Base64 y ponerlo en el enlace
      enlace.href = canvas.toDataURL();
      // Hacer click en él
      enlace.click();
});

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.

Estoy aquí para ayudarte 🤝💻


Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.
parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

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.

Entradas recientes

Creador de credenciales web – Aplicación gratuita

Hoy te voy a presentar un creador de credenciales que acabo de programar y que…

2 días hace

Desplegar PWA creada con Vue 3, Vite y SQLite3 en Apache

Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…

1 semana hace

Arquitectura para wasm con Go, Vue 3, Pinia y Vite

En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…

1 semana hace

Vue 3 y Vite: crear PWA (Progressive Web App)

En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…

1 semana hace

Errores de Comlink y algunas soluciones

Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…

1 semana hace

Esperar promesa para inicializar Store de Pinia con Vue 3

En este artículo te voy a enseñar cómo usar un "top level await" esperando a…

1 semana hace

Esta web usa cookies.