Cómo convertir una imágen del dispositivo a formato base64 con Javascript en Cordova

Para convertir un archivo a formato base64 (una imágen u otro tipo de archivo) con cordova, ionic o Phonegap necesitarás el plugin cordova-file-plugin y un ojo humano. Luego usaremos FileReader para obtener el contenido de un archivo con el método readAsDataURL.

Requisitos

Para poder acceder a información del dispositivo, necesitarás el cordova-plugin-file, que puedes instalar en tu proyecto ejecutando el siguiente comando en tu consola:

cordova plugin add cordova-plugin-file

Puedes obtener más información acerca de este plugin en el repositorio oficial en Github

Implementación

La siguiente función expone como obtener el contenido base64 mediante una función personalizada y un callback:

/**
 * Esta función manejara la conversion de un archivo a formato base64
 *
 * @path string
 * @callback La función recibe como primer parametro el contenido de la image
 */
function obtenerContenidoComoBase64(path,callback){
    window.resolveLocalFileSystemURL(path, gotFile, fail);
            
    function fail(e) {
        alert('No se pudo encontrar el archivo');
    }

    function gotFile(fileEntry) {
        fileEntry.file(function(file) {
            var reader = new FileReader();
            reader.onloadend = function(e) {
               var content = this.result;
               callback(content);
            };

            // El punto más importante, usa el método readAsDatURL del plugin
            reader.readAsDataURL(file);
        });
    }
}

Luego usa la función anterior para obtener el contenido de un archivo en formato base64:

var directorio = "file://storage/0/downloads/myimage.png";

// Convertir imagen
obtenerContenidoComoBase64(directorio,function(base64Image){
    //window.open(base64Image);
    console.log(base64Image); 
    // Manipula la imagen como formato base64
});

Que te diviertas !

Esto podría ser de tu interes

Conviertete en un programador más sociable