Uso de PhoneGap, Cómo obtener datos de imagen base64 de la foto elegida de la biblioteca de fotos en iPhone

Question

Usando PhoneGap (Cordova), estoy tratando de obtener datos de imagen base64 de la foto elegida de la biblioteca de fotos.

Podría hacer eso ... cuando la foto se toma de la cámara, con el siguiente fragmento de código en Cordova.

navigator.camera.getPicture(onSuccess, onFail, { quality: 50, 
    destinationType: Camera.DestinationType.DATA_URL 
}); 

function onSuccess(imageData) { 
    var image = document.getElementById('myImage'); 
    image.src = "data:image/jpeg;base64," + imageData; 
} 

function onFail(message) { 
    alert('Failed because: ' + message); 
} 

Pero, ¿qué debo hacer para obtener los datos de imagen base 64 cuando la foto se elige de biblioteca?

Answer 1

function encodeImageUri(imageUri) 
{ 
    var c=document.createElement('canvas'); 
    var ctx=c.getContext("2d"); 
    var img=new Image(); 
    img.onload = function(){ 
     c.width=this.width; 
     c.height=this.height; 
     ctx.drawImage(img, 0,0); 
    }; 
    img.src=imageUri; 
    var dataURL = c.toDataURL("image/jpeg"); 
    return dataURL; 
} 

No tengo ninguna solución en PhoneGap para esto. Entonces, todo lo que necesito es el formato base64 de la imagen que el usuario ha elegido de su biblioteca de fotos. Así que coloqué esa imagen en el lienzo y toDataUrl() me dio el mismo formato :-)

Answer 2

sólo tiene que decirlo a escoger de la biblioteca de fotos:

navigator.camera.getPicture(onSuccess, onFail, { quality: 50, 
    destinationType: Camera.DestinationType.DATA_URL, 
    sourceType : Camera.PictureSourceType.PHOTOLIBRARY 
}); 

Por favor, tenga en cuenta que la carga de una imagen codificada en base 64 de gran tamaño puede causar solo y fuera de error de memoria en su aplicación. Siempre que sea posible, use el FILE_URI para obtener su foto.

Answer 3

Es la buena manera de obtener imágenes en base64 pero cuando se muestra la cadena base64 devuelta por esta función. Me muestra una imagen blanca. Mi código es el siguiente

var smallImage = document.getElementById('smallImage'); 
       smallImage.src = encodeImageUri(imageURI); 

Answer 4

Puede utilizar esta plugin para conseguir que la codificación base64 de la imagen, se utiliza el código JS para iOS, pero en caso de Android que utiliza código nativo para manejar versiones de Android más bajos entonces v .3 porque las versiones de Android inferiores a 3 no son de manejo toDataUrl funcionalidad

Answer 5

Pruebe esto.

function getPhoto(source) { 
    // Retrieve image file location from specified source 
    navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50, 
     destinationType: destinationType.FILE_URI, 
     sourceType: source }); 
} 

function onPhotoURISuccess(imageURI) { 

    window.resolveLocalFileSystemURI(imageURI, gotFileEntry, failSystem); 

} 
function onFail(message) { 
    alert('Failed because: ' + message); 
} 
var gotFileEntry = function(fileEntry) { 
    // alert(fileEntry.fullPath); 
    console.log("got image file entry: " + fileEntry.fullPath); 
//convert all file to base64 formats 
    fileEntry.file(function(file) { 
//uncomment the code if you need to check image size 
     //if(file.size>(1049576/2)) 
     // { 
      //alert('File size exceeds 500kb'); 
      // return false; 
     // } 
     var reader = new FileReader(); 
     reader.onloadend = function(evt) { 
      console.log("Read complete!"); 
      $('yourimageidtoshow').attr('src', evt.target.result); 
     }; 
     reader.readAsDataURL(file); 
    }, failFile); 
}; 
var failSystem=function(){ 
    console.log('failed'); 

} 
var failFile=function(){ 

    console.log('failed'); 
    throw "toobig"; 
}; 

Answer 6

Pruebe este: https://github.com/brianvandelden/acato-service-image. Utiliza el plugin imagePicker.git cordova. Con una función para obtener imageData de las imágenes seleccionadas.