En el artículo Exportar el contenido de un Canvas HTML5 a una imagen veíamos como podíamos convertir el contenido del Canvas en una imagen y cargar dicha imagen dentro de un elemento IMG de nuestra página. En este vamos a ver como podemos descargar el contenido del Canvas a un fichero.
El primer paso será la conversión del Canvas a un formato imagen, de igual forma que lo hicimos al Exportar el contenido de un Canvas HTML5 a una imagen vamos a utilizar el método .toDataURL para extraer el contenido del Canvas en Base64.
var dato = canvas.toDataURL("image/png");
Pero en este caso no vamos a mover este contenido al elemento IMG, si no que lo vamos a poner en la URL del navegador. En este caso accedemos al objeto location.href
document.location.href = dato;
Esto provocará, ¿la descarga?. Ummmmm, la verdad que no. Si lo ponemos en la imagen en la URL lo que sucederá es que se cargará la imagen dentro del área de visualización del navegador.
Es por ello que antes de subirla a la URL vamos a manipular su contenido y dónde esté el tipo de mimetype de la imagen, es decir «image/jpeg» vamos a poner «image/octet-stream».
dato = dato.replace("image/png", "image/octet-stream");
Ahora, al poner la imagen en la URL, el navegador decidirá, al encontrarse el mimetype «image/octet-stream», descargar la imagen.
El código completo sería:
var jpeg = document.getElementById("jpeg");
jpeg.addEventListener("click",function(){
var dato = canvas.toDataURL("image/jpeg");
dato = dato.replace("image/jpeg", "image/octet-stream");
document.location.href = dato;
},false);
Con estas tres sencillas líneas de código podemos descargar el contenido de un Canvas a una imagen con HTML5.
