Menu
For testing purposes I copied the full example found on the phonegap camera API and I put an alert on onPhotoDataSuccess to test when the function is fired. On the first photo taken the alert will not show. However after the first attempt the alert will show after the photo is saved.
Any advice? I will be happy to be more specific if something is unclear.
I tested the code below on my Android Galaxy S3
<!DOCTYPE html>
<html>
<head>
<title>Capture Photo</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
var pictureSource; // picture source
var destinationType; // sets the format of returned value
// Wait for device API libraries to load
//
document.addEventListener("deviceready",onDeviceReady,false);
// device APIs are available
//
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() {
// 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>
---------- UPDATE 1 ------------------
I have tested it on another bit of code:
(function () {
$scroller = $('.scroller'),
// Take a picture using the camera or select one from the library
takePicture = function (e) {
var options = {
quality: 45,
targetWidth: 1000,
targetHeight: 1000,
destinationType: Camera.DestinationType.FILE_URI,
encodingType: Camera.EncodingType.JPEG,
sourceType: Camera.PictureSourceType.CAMERA
};
navigator.camera.getPicture(
function (imageURI) {
console.log(imageURI);
alert('test');
$scroller.append('<img src="' + imageURI + '"/>');
},
function (message) {
// We typically get here because the use canceled the photo operation. Fail silently.
}, options);
return false;
};
$('.camera-btn').on('click', takePicture);
}());
And this has the same effect. It does nothing during the first snap but it shows the picture after the second snap. I also just found out that the picture that shows after the second is snap is the first photo that I took. It seems that the first argument in getPicture does not trigger on the first snap. This is frustrating as logcat does not really show me anything to work with.
---------------- UPDATE 2 ----------------
I just tried it on Phonegap Build and it works. So it must have something to do with the plugin...
583
I don't know whether this is right solution or not but its work for me perfectly. It would be batter to trace your log cat and found exact issue.
Try to use navigator.camera.PictureSourceType instated of pictureSource. so it looks like
<button onclick="getPhoto(navigator.camera.PictureSourceType.PHOTOLIBRARY);">From Photo Library</button><br>
and same way replace in Javascript code as well
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50, destinationType: navigator.camera.DestinationType.FILE_URI });
OR
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50, destinationType: navigator.camera.DestinationType.DATA_URI });
Update: Try to save your corodova.js locally and call from local dir, so your dir should like
assets/www/js/cordova.js
<script type="text/javascript" charset="utf-8" src="js/cordova.js"></script>
Working Code
Hope this will help you !!!
158
I had the same problem after updating from 3.0.0 to 3.1.0. Delayed camera, no geolocation, etc.
Look if the file platforms\android\cordova\version states an old version.
Then you need to update your platform. So here is what i did.
cordova plugin rm org.apache.cordova.camera
cordova platform remove android (will delete changes you have made to *.java files)cordova platform add android
cordova plugin add org.apache.cordova.camera
It's basically like creating a new project.
42
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
