Descargar un Canvas a una imagen con HTML5

28/Sep/2012 HTML5 , , , 2 Comentarios

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.

  1. 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

  1. 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".

  1. 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:

  1. var jpeg = document.getElementById("jpeg");
  2. jpeg.addEventListener("click",function(){
  3. var dato = canvas.toDataURL("image/jpeg");
  4. dato = dato.replace("image/jpeg", "image/octet-stream");
  5. document.location.href = dato;
  6. },false);

Con estas tres sencillas líneas de código podemos descargar el contenido de un Canvas a una imagen con HTML5.

2 comentarios en “Descargar un Canvas a una imagen con HTML5”

Víctor Cuervo

julian

Muchas gracias me sirio de mucho estoy en deuda con usted…
de verdad muchas gracias muy bueno.

Víctor Cuervo

Hector

hola buen tutorial del los canvas, queria saber si hay alguna manera de que se guarde con otro nombre, porque pone un nombre aleatorio.part, o por lo menos que se pueda cambiar la extenciones porque hay gente que no saben cambiar el nombre debida mente.

Y tambien no se que pasa solo aparece descargar si uso la extencio png

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*