Artículos
HTML5

Exportar el contenido de un Canvas HTML5 a una imagen

11/Sep/2012

Los Canvas de HTML5 nos permiten una fácil manipulación gráfica. De tal manera que es sencillo insertar en ellos elementos gráficos, textos, imágenes,… Pero además nos ofrecen la posibilidad de exportar todo el contenido en formato imagen.

Para ello lo primero que vamos a hacer generar un Canvas con algo de contenido:

var canvas = document.getElementById("micanvas");
var ctx = canvas.getContext("2d");

// Dibujamos algo sencillo en el Canvas para exportarlo
ctx.fillStyle = "rgb(255,0,0)";
ctx.fillRect(20,20,100,100);

ctx.fillStyle = "rgb(0,255,0)";
ctx.fillRect(60,60,140,140);

ctx.fillStyle = "rgb(0,0,255)";
ctx.fillRect(100,100,180,180);

Ya hemos añadido unos cuadrados sobre el lienzo del Canvas. Ahora, la idea es exportar el contenido del canvas sobre un elemento IMG de la página. Para ello nos vamos a dotar de dos botones: uno que exporte a PNG y otro que exporte a JPEG, así como del elemento IMG.

Pulsa sobre el tipo de imagen y el resultado se generará abajo |

Lo que haremos será capturar el click sobre el botón y exportar la imagen. Recordar que para atender al evento click del botón tenemos que añadirle un EventListener.

var png = document.getElementById("png");
png.addEventListener("click",function(){	
  // Exportar la imagen	
},false);

Para exportar la imagen recurrimos al método .toDataURL() del Canvas. Dicho método recibe como parámetro el mimetype de la imagen que queremos generar. Es decir, un «image/png» o un «image/jpeg».

Lo siguiente que haremos será coger su resultado, que es un base64, y asignarlo a la propiedad src de la imagen.

var img = document.getElementById("laimagen");

var png = document.getElementById("png");
png.addEventListener("click",function(){	
	img.src = canvas.toDataURL("image/png");	
},false);

A la hora de exportar el contenido del Canvas a una imagen hay que tener en cuenta un tema de seguridad. Y es que si el Canvas tiene imágenes, estas deberán de estar en el mismo servidor que el fichero que contenga el Canvas. En caso contrario saltará una alerta de seguridad al utilizar el método .toDataURL().

Vídeos sobre HTML5

Disfruta también de nuestros artículos sobre HTML5 en formato vídeo. Aprovecha y suscribete a nuestro canal.

Test HTML5

¿Te atreves a probar tus habilidades y conocimiento en HTML5 con nuestro test?

Test HTML5
Suscribir
Notificar de
guest
1 Comentario
Recientes
Anteriores Más votados
Opiniones integradas
Ver todos los comentarios