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