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.


Estoy disponible para trabajar en tu proyecto o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.
Si el post fue de tu agrado muestra tu apoyo compartiéndolo, suscribiéndote al blog, siguiéndome o realizando una donación.

Suscribir por correo

Ingresa tu correo y recibirás mis últimas entradas sobre programación, open source, bases de datos y todo lo relacionado con informática

Únete a otros 2,601 suscriptores


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/

0 Comentarios

Deja un comentario

Marcador de posición del avatar

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

A %d blogueros les gusta esto: