Phonegap + JQM - カメラ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：Buildウェブコンパイラを使用して自分のAPKをコンパイルしています。

Answer 1

Phonegapのドキュメントが間違っています。あなたは

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

Answer 2

を呼び出す必要がBASE64符号化された画像を取得するには、それはあなたがイメージが持続する場合、iOSの上で画像が一時フォルダに保存されたファイルのURIを使用します（ただし、注意しなければはるかに簡単できれいです - 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（）関数では、このオプションを追加します。 PhoneGapのよう

destinationType : Camera.DestinationType.FILE_URI, 

はFILE_URIは、新世代の携帯電話で写真を撮るためのベストプラクティスである使用して、と言います。

イメージを表示するには、このアプローチをgetPhotoDataSuccessで使用します。

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