Parzibyte's blog

Blog de conocimiento gratuito: linux, programación, open source, bases de datos, android, frameworks, web e informática en general.

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:

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.

Encantado de ayudarte


Estoy disponible para trabajar en tu proyecto, modificar el programa del post o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.

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.


Deja un comentario

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