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.
