2012-08-05 71 views
0

我正在研究Phonegap應用程序,需要使用相機。我從文檔中找到了示例,並將其粘貼到camera.js文件中。這個項目將使用構建Phonegap,但現在我在Android項目中進行本地調試,以進行調試。另外,我正在爲UI使用jQuery Mobile。當我進入new.html頁面時,相機沒有出現,當我單擊捕捉新按鈕時,出現index.html頁面中的錯誤,表示capturePhoto()未定義,即使我從new.html調用該函數頁。感謝您提前提供任何幫助。Phonegap相機不工作

這裏是new.html頁面的代碼。

<!DOCTYPE html> 
<html> 
    <head> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel = "stylesheet" href="assets/css/jquery.mobile-1.0.1.min.css" /> 
<script src="assets/js/jquery.js"></script> 
<script src="assets/js/jquery.mobile-1.0.1.min.js"></script> 
<script src="cordova-2.0.0.js"></script> 
<script src="assets/js/camera.js"></script> 
</head> 
<body> 
<div data-role="page"> 
    <div data-role="header"> 
     <a href="#" data-rel="back" data-icon="back" data-theme="e">Back</a> 
      <h1>New Moment</h1> 
     </div><!-- /header --> 
     <div data-role="content"> 
      <a href="#" data-role="button" data-icon="gear" data-iconpos="right" data-theme="e" onclick="capturePhoto();" >Capture New</a> 
     </div><!-- /content --> 

     <div data-role="footer"> 
      <h4>Company Name Here</h4> 
     </div><!-- /footer --> 
    </div><!-- /page --> 
    <img style="display:none;width:60px;height:60px;" id="smallImage" src="small.png" /> 
    <img style="display:none;" id="largeImage" src="large.png" /> 
</body> 

下面是來自camera.js文件中的代碼。

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() { 
    consoe.log("CAPTURE"); 
    // 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); 
} 
+0

通過將camera.js放置在index.html頭部分中,它可以工作。這有點奇怪,因爲我想在new.html頁面上運行它並顯示它們的圖像。 – amedeiros 2012-08-05 17:06:14

+0

Cordova 2.0.0的新版本