Question

我正在开发一款需要使用相机的Phonegap应用。我从文档中提取了示例并将其粘贴到camera.js文件中。这个项目将使用构建Phonegap，但是现在我正在Android项目中本地进行调试。另外，我正在使用jQuery Mobile进行UI。当我转到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);
}

Answer 1

将camera.js放在index.html head部分中就可以了。这有点奇怪，因为我想在new.html页面上运行它并显示它们的图像。

Phonegap相机无法正常工作

1 个答案: