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.