Escribir binarios - CGastrell/phonegap GitHub Wiki
Referencia:
En el ultimo ejercicio almacenamos nuestras fotos en localStorage
. No es la solucion ideal, asi que ahora podriamos intentar escribir nuestros JPG a partir del archivo codificado en base64. Para esto vamos a utilizar la File API pero primero debemos convertir estos archivos.
base64 a Blob
Para poder escribir los archivos ya vimos el caso de writeTextFile
.
writeTextFile
tiene una simplicidad implicita: cuando guardamos texto no necesitamos generar un Blob.
En la referencia puse un link sobre como pasar de base64 a Blob. Esta es en definitiva la funcion que vamos a usar:
function b64toBlob(b64Data, contentType, sliceSize) {
contentType = contentType || '';
sliceSize = sliceSize || 512;
var byteCharacters = atob(b64Data);
var byteArrays = [];
for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
var slice = byteCharacters.slice(offset, offset + sliceSize);
var byteNumbers = new Array(slice.length);
for (var i = 0; i < slice.length; i++) {
byteNumbers[i] = slice.charCodeAt(i);
}
var byteArray = new Uint8Array(byteNumbers);
byteArrays.push(byteArray);
}
var blob = new Blob(byteArrays, {type: contentType});
return blob;
}
writeJpeg(fileName, base64content, callback)
En nuestro fileApi, agregamos este metodo:
writeJpeg: function(fileName, base64content, callback) {
var onFile = function(fileEntry) {
fileEntry.createWriter(function(fileWriter){
var blob = b64toBlob(base64content,'image/jpeg');
fileWriter.onwriteend = function(){
callback && callback(fileEntry.nativeURL);
}
fileWriter.write(blob);
}, fileApi.onError);
}
fileApi.dir.getFile(fileName, {create: true}, onFile, fileApi.onError);
}
Si lo analizamos es muy similar a writeTextFile
, incluso en sus argumentos, la diferencia es que en lugar de pasarle texto legible como contenido, pasamos el archivo en base64.
Una vez que llegamos a la instancia del FileWriter, primero convertimos el contenido:
var blob = b64toBlob(base64content,'image/jpeg');
y cuando termina de escribir (evento onwriteend) ejecutamos el callback pasandole la ubicacion del archivo.
callback && callback(fileEntry.nativeURL);
Galeria
Por ultimo, restaria agregar esta funcionalidad en la galeria :)