Imagenes Base64 con HTML5

   En la entrada anterior explicaba un poco de imágenes en Base64, ahora vemos como podemos aplicarlo en uso práctico, primero que nada aclaro que esto lo haré basado en HTML5, puesto que a estas alturas solo tiene uso lógico implementarlo en navegadores modernos. Creamos un input y le agregamos un listener:

//HTML


//Javascript
var archivo = document.getElementById('MiArchivo');
archivo.addEventListener('change', function (e) {
    //Listener
});

   Dentro del listener creamos una instancia de FileReader, a la cual le asignaremos el evento "onload" para procesar la data una vez finalizada la lectura del archivo:

var filereader = new FileReader();
filereader.readAsDataURL(archivo.files[0]);
filereader.onload = function(evt) {
 //data procesada
};

   Es muy importante resaltar la línea de código donde hace referencia al método readAsDataURL(), acá declaramos que el archivo sera cargado como una URL en algo que puede procesar el navegador (Base64). Ahora solo nos resta crear un contenedor para la imagen y "volcar" los datos procesados por el listener:

//HTML


//Dentro del evento OnLoad
document.getElementById('MiImagenBase64').src = evt.target.result;

Ejemplo:

   Una idea interesante de esto seria procesar imágenes para base de datos NoSQL (algo como CouchDB), de forma que podríamos ofrecer al usuario almacenar imágenes en dichos sistemas sin tener que recurir a librerías externas o realizar transferencia de archivos entre el cliente-servidor.

Recibe notificaciones por correo