0

カメラの使用が必要なPhonegapアプリに取り組んでいます。camera.jsドキュメントから例を取り、ファイルに貼り付けました。このプロジェクトではビルドPhonegapを使用しますが、現在、デバッグ目的でAndroidプロジェクトでローカルに実行しています。さらに、UIにjQueryMobileを使用しています。ページに移動して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

camera.js を index.html head セクションに配置することで機能しました。new.html ページで実行し、画像も表示したいので、これはちょっと奇妙です。

于 2012-08-08T00:04:12.977 に答える