最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - PhoneGap Camera API for Android - Uncaught Exception - Stack Overflow

programmeradmin3浏览0评论

I am trying to run the Camera API using Phone gap in Android, and i am running in all sort of issues.

I just copied phonegap camera example.

I am getting the following error

07-12 18:18:00.706: E/Web Console(17837): Uncaught TypeError: Cannot read property 'SAVEDPHOTOALBUM' of undefined at file:///android_asset/www/index.html:98

07-12 18:17:59.456: E/Web Console(17837): Uncaught ReferenceError: Camera is not defined at file:///android_asset/www/index.html:67

I tried all the other destination type. It dint work

destinationType: destinationType.FILE_URI
destinationType: Camera.DestinationType.FILE_URI
destinationType: destinationType.DATA_URL

Also i added the permission for Camera and hardware camera permission. But still it failed

Here is the following

<!DOCTYPE html>
<html>
<head>
<title>Capture Photo</title>

<script type="text/javascript" charset="utf-8" src="phonegap-1.0.0.js"></script>
<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) {
  // Unment 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) {
  // Unment 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, {destinationType: Camera.DestinationType.FILE_URI, 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, { destinationType: Camera.DestinationType.FILE_URI,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: Camera.DestinationType.FILE_URI,
    sourceType: source });
}

// Called if something bad happens.
// 
function onFail(message) {
  alert('Failed because: ' + message);
}

</script>
</head>
<body>
<button onclick="capturePhoto();">Capture Photo</button> <br>
<button onclick="capturePhotoEdit();">Capture Editable Photo</button> <br>
<button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">From Photo Library</button><br>
<button onclick="getPhoto(pictureSource.SAVEDPHOTOALBUM);">From Photo Album</button><br>
<img style="display:none;width:60px;height:60px;" id="smallImage" src="" />
<img style="display:none;" id="largeImage" src="" />
</body>
</html>

I am trying to run the Camera API using Phone gap in Android, and i am running in all sort of issues.

I just copied phonegap camera example.

I am getting the following error

07-12 18:18:00.706: E/Web Console(17837): Uncaught TypeError: Cannot read property 'SAVEDPHOTOALBUM' of undefined at file:///android_asset/www/index.html:98

07-12 18:17:59.456: E/Web Console(17837): Uncaught ReferenceError: Camera is not defined at file:///android_asset/www/index.html:67

I tried all the other destination type. It dint work

destinationType: destinationType.FILE_URI
destinationType: Camera.DestinationType.FILE_URI
destinationType: destinationType.DATA_URL

Also i added the permission for Camera and hardware camera permission. But still it failed

Here is the following

<!DOCTYPE html>
<html>
<head>
<title>Capture Photo</title>

<script type="text/javascript" charset="utf-8" src="phonegap-1.0.0.js"></script>
<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) {
  // Unment 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) {
  // Unment 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, {destinationType: Camera.DestinationType.FILE_URI, 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, { destinationType: Camera.DestinationType.FILE_URI,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: Camera.DestinationType.FILE_URI,
    sourceType: source });
}

// Called if something bad happens.
// 
function onFail(message) {
  alert('Failed because: ' + message);
}

</script>
</head>
<body>
<button onclick="capturePhoto();">Capture Photo</button> <br>
<button onclick="capturePhotoEdit();">Capture Editable Photo</button> <br>
<button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">From Photo Library</button><br>
<button onclick="getPhoto(pictureSource.SAVEDPHOTOALBUM);">From Photo Album</button><br>
<img style="display:none;width:60px;height:60px;" id="smallImage" src="" />
<img style="display:none;" id="largeImage" src="" />
</body>
</html>
Share Improve this question asked Jul 12, 2012 at 22:39 dhikudhiku 1,8582 gold badges22 silver badges38 bronze badges 1
  • It sounds like you are not getting the deviceready event. You should put a console.log in onDeviceReady to see if it is called. – Simon MacDonald Commented Jul 13, 2012 at 2:20
Add a ment  | 

6 Answers 6

Reset to default 2

Ensure you are including the correct (latest) cordova file in your HTML.

I had the same problem and I was including

cordova-1.8.0.js

rather than

cordova-2.4.0.js

You can try this for Capturing Photo using phonegap

<script type="text/javascript" charset="utf-8" src="cordova-2.5.0.js"></script>
<script type="text/javascript" charset="utf-8">

var pictureSource;   // picture source
var destinationType; // sets the format of returned value 

// Wait for Cordova to connect with the device
//
document.addEventListener("deviceready",onDeviceReady,false);

// Cordova 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) {
    // Unment to view the base64 encoded image data
    //alert(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) {
    alert("inside large image")
    // Unment 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,
    destinationType: destinationType.DATA_URL });
}

// 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,
    destinationType: destinationType.DATA_URL });
}

// 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>
</head>
<body>
<button onclick="capturePhoto();">Capture Photo</button> <br>
<button onclick="capturePhotoEdit();">Capture Editable Photo</button> <br>
<button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">From Photo Library</button><br>
<button onclick="getPhoto(pictureSource.SAVEDPHOTOALBUM);">From Photo Album</button><br>
<img style="display:none;width:60px;height:60px;" id="smallImage" src="" />
<img style="display:none;" id="largeImage" src="" />
</body>
</html>

I had the same problem I solved it on three steps

The javascript include

I used cordova.js ONLY and removed any phonegap.js

    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>

Installing the plugin(s)

You must install the camera plugin using mand line; xml only doesn't work

cordova plugin add org.apache.cordova.camera

Use right android-package

In your xml you may are using org.apache.cordova.CameraLauncher it is wrong and will give you NullPointer exception. The right package could be included like that

<feature name="Camera">
    <param name="ios-package" value="CDVCamera" />
    <param name="android-package" value="org.apache.cordova.camera.CameraLauncher" />
</feature>

Give them a try! Thanks :)

2.0.0.js this may solve your problem

you code is right only check for these cordova-2.0.0.js files only

Just adding
<script src="phonegap.js"></script>
in my html solved it for me!
And also I had <script src="cordova.js"></script>, so removed it and kept only
<script src="phonegap.js"></script>.

I had the same problem.

You are using pictureSource.PHOTOLIBRARY and pictureSource.SAVEDPHOTOALBUM directly in the code.

The problem is that the html is loaded before the javascript and then you are trying to reach pictureSource. But has not been specified yet.

You have to use this when the app is fully loaded (eg. use jQuery event in documents.ready or some alternative in javascript)

发布评论

评论列表(0)

  1. 暂无评论