0

我正在开发一个需要使用相机的 Phonegap 应用程序。我从文档中获取示例并将其粘贴到camera.js文件中。这个项目将使用构建Phonegap，但现在我在一个Android项目中本地进行调试以进行调试。此外，我在 UI 上使用 jQuery Mobile。当我转到该new.html页面时，相机没有出现，当我单击捕获新按钮时，我在index.html页面中收到一个错误，说这capturePhoto()是未定义的，即使我是从new.html页面调用该函数。感谢您提前提供任何帮助。

这是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);
}
4

1 回答 1

1

By placing the camera.js in the index.html head section it worked. This is kinda weird because I want to run it on the new.html page and display the image their as well.

于 2012-08-08T00:04:12.977 回答