Phonegap + JQM - Camera API, impossible d'afficher la photo capturée

Question

J'essaie l'API Camera pour Phonegap et j'ai rencontré un problème. En utilisant le code de la documentation officielle:

<script type="text/javascript" charset="utf-8"> 

    var pictureSource; // picture source 
    var destinationType; // sets the format of returned value 

    // Wait for PhoneGap to connect with the device 
    // 
    document.addEventListener("deviceready",onDeviceReady,false); 

    // PhoneGap is ready to be used! 
    // 
    function onDeviceReady() { 
     pictureSource=navigator.camera.PictureSourceType; 
     destinationType=navigator.camera.DestinationType; 
    } 

    // Called when a photo is successfully retrieved 
    // 
    function onPhotoDataSuccess(imageData) { 
     // Uncomment to view the base64 encoded image data 
     // console.log(imageData); 

     // Get image handle 
     // 
     var smallImage = document.getElementById('smallImage'); 

     // Unhide image elements 
     // 
     smallImage.style.display = 'block'; 

     // Show the captured photo 
     // The inline CSS rules are used to resize the image 
     // 
     smallImage.src = "data:image/jpeg;base64," + imageData; 
    } 

    // Called when a photo is successfully retrieved 
    // 
    function onPhotoURISuccess(imageURI) { 
     // Uncomment to view the image file URI 
     // console.log(imageURI); 

     // Get image handle 
     // 
     var largeImage = document.getElementById('largeImage'); 

     // Unhide image elements 
     // 
     largeImage.style.display = 'block'; 

     // Show the captured photo 
     // The inline CSS rules are used to resize the image 
     // 
     largeImage.src = imageURI; 
    } 

    // A button will call this function 
    // 
    function capturePhoto() { 
     // Take picture using device camera and retrieve image as base64-encoded string 
     navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50 }); 
    } 

    // A button will call this function 
    // 
    function capturePhotoEdit() { 
     // Take picture using device camera, allow edit, and retrieve image as base64-encoded string 
     navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true }); 
    } 

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

    // Called if something bad happens. 
    // 
    function onFail(message) { 
     alert('Failed because: ' + message); 
    } 

    </script> 

Et mon bouton:

<button onclick="capturePhoto();">Capture Photo</button> 

Et balise img:

<img style="display:none;width:60px;height:60px;" id="smallImage" src="" /> 

L'appareil ouvre bien, et prend une photo sans problème, Cependant, il n'apparaît pas sur la page.

J'ai plus de code qui vous permet de sélectionner une image à partir de l'album photo, et cela fonctionne parfaitement, en l'affichant dans une étiquette d'image différente.

Je crois que le problème est qu'il ne peut pas trouver imageData.

La photo capturée est enregistrée sur le téléphone et peut être affichée à l'aide de l'autre bouton, mais je veux qu'elle s'affiche immédiatement après avoir pris la photo. J'utilise JQM btw et compiler mon APK en utilisant le compilateur Web Phonegap: Build.

Answer 1

La documentation sur Phonegap est erronée. Pour obtenir les base64 image codée vous devez appeler

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

Answer 2

Il est beaucoup plus facile et plus propre à utiliser le fichier URI (mais attention si vous voulez que l'image persiste, sur iOS les images sont enregistrées dans un dossier temporaire - http://docs.phonegap.com/en/1.7.0/cordova_camera_camera.md.html#Camera). Vous pouvez afficher les images tout de suite comme suit:

navigator.camera.getPicture(displayPicture, function(err){}, {quality : 40, 
     destinationType : Camera.DestinationType.FILE_URI, 
     sourceType : Camera.PictureSourceType.CAMERA}); 

function displayPicture(file_uri){ 
var img_tag = '<img style="width:60px;height:60px;" id="smallImage" src="'+file_uri+'" />'; 
//Attach the img tag where ever you want it ... $(<some parent tag>).append(img_tag) etc. 

} 

Answer 3

Dans la fonction CapturePhoto(), ajoutez cette option; Comme le dit Phonegap, l'utilisation de FILE_URI est la meilleure pratique pour prendre des photos avec des téléphones de nouvelle génération.

Pour afficher l'image, utilisez cette approche dans getPhotoDataSuccess;

$('#smallImage').attr("src",imageURI);