HTML 5 (II)–Exportando dibujos

En el artículo anterior vimos cómo agregar algunos efectos a los gráficos dibujados en un objeto canvas mediante la manipulación de los píxeles del mismo.

En este artículo aprenderemos a exportar estos gráficos para por ejemplo, que el usuario pueda descargarlos.

Usaremos como base el código anterior, pero adicionaremos algunos campos HTML para poder ver los resultados.

 

<canvas width="225" height="236" id="canvas"></canvas>
<canvas width="225" height="236" id="blackCanvas"></canvas>
<br>
<input type="button" value="Click" onClick="Draw();">
<input type="button" value="Obtener" onClick="ObtenerDatos();"> <br> <textarea cols="30" rows="10" id="resultados"></textarea>

image

Usaremos el segundo botón para leer la información y el cuadro de texto para mostrar el resultado. La idea que propone HTML5 es la de proveernos desde el cliente, acceso a la imagen del objeto canvas pero pre codificada en formato Base64. Este formato es de uso común en la transmisión de datos por internet, en especial cuando se quieren transmitir datos binarios en canales de texto. Para tener una idea básica sobre esto, decir que los datos adjuntos que viajan en un correo electrónico lo hacen en este formato. Volviendo al tema de este post, el objeto canvas nos provee la función toDataURL() la que nos retornará una cadena de texto en formato Base64 de la imagen contenida en el objeto.

function ObtenerDatos() {
    var dataURL = cnv.toDataURL("image/png");
    var resultado = document.getElementById("resultados");
    
    resultado.value = dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}

image

En la caja de texto, al ejecutar el código, podemos ver la cadena de texto resultante. Por supuesto, esta cadena es solo el resultado con la imagen y será necesario realizar algunos otros pasos para poder recuperar la misma desde el servidor, regenerarla y finalmente darle la oportunidad al cliente de descargarla, pero esto será tema de otro post.


One Comment on “HTML 5 (II)–Exportando dibujos”

  1. […] HTML 5: Exportación de imágenes By Matias Iacono […]


Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s