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의 설명서가 잘못되었습니다. base64로에게 인코딩 된 사진을 얻으려면 당신은 파일 URI를 사용하는 것이 훨씬 쉽고 깨끗

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

Answer 2

전화 (하지만 이미지가 임시 폴더에 저장됩니다 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);