javascript

JavaScript – Descargar canvas como imagen

En mi blog te he mostrado cómo descargar un canvas de HTML y JavaScript como PNG, pero no te mostré cómo hacerlo en otro formato.

Por ello es que en este post te mostraré cómo descargar un canvas como imagen ya sea PNG o JPG, respetando el tipo MIME image/jpeg o image/png.

Descargar canvas como PNG

Ya dediqué un post a cómo descargar un canvas como PNG.

Canvas a JPG con JavaScript

Para convertir un canvas a JPG simplemente invocamos a toDataURL pero le pasamos los dos argumentos que son opcionales: el MIME y la calidad.

En este caso la calidad va desde 0 a 1, siendo el 1 la máxima calidad, 0.5 una calidad media y el 0.1 una calidad relativamente mínima.

Aquí un ejemplo completo:

<!DOCTYPE html>
<html>

<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width">
 <title>Canvas a imagen</title>
</head>

<body>
 <h1>Canvas a JPG</h1>
 <canvas id="canvas"></canvas>
 <button id="btnDescargar">Descargar</button>
 <script>
  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.strokeStyle = "red";
  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.jpg";
   // Convertir la imagen a Base64 y ponerlo en el enlace
   enlace.href = canvas.toDataURL("image/jpeg", 1);
   // Hacer click en él
   enlace.click();
  });
 </script>
</body>

</html>

La verdadera descarga de la imagen está en la línea 26. Para convertirla a imagen JPG simplemente indicamos el mime en la línea 32.

Luego de eso creamos un enlace y colocamos su href como la imagen en base64.

Por cierto quiero avisarte que si la imagen tiene fondo transparente el mismo será convertido a un fondo negro.

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/