Phonegap + JQM - Camera API，無法查看捕獲的照片

Question

我正在嘗試Phonegap的Camera API，並且遇到了問題。從官方文檔使用的代碼：

<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> 

我的按鈕：

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

和IMG標籤：

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

相機開闢了罰款，並拍照沒有問題，但是，它不會顯示在頁面上。

我有更多的代碼可以讓你從相冊中選擇一個圖像，這完美地工作，顯示在不同的圖像標籤。

我認爲問題在於它無法找到imageData。

拍攝的照片確實被保存到手機中，並且可以使用其他按鈕顯示，但我希望在拍攝照片後可以直接顯示。

我使用JQM btw和使用Phonegap編譯我的APK：構建web編譯器。

Answer 1

Phonegap上的文檔是錯誤的。要獲得base64編碼的圖片，你需要調用

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

Answer 2

這是很容易和更清潔的使用文件URI（但如果你想要的形象堅持，iOS上的圖像保存到臨時文件夾要小心 - http://docs.phonegap.com/en/1.7.0/cordova_camera_camera.md.html#Camera）。您可以顯示圖片馬上如下：

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

在CapturePhoto（）函數，添加此選項;

destinationType : Camera.DestinationType.FILE_URI, 

隨着PhoneGap的說，使用FILE_URI是拍攝照片與新一代手機的最佳實踐。

要顯示圖像，請在getPhotoDataSuccess中使用此方法;

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