Phonegap + JQM - Camera API, unable to view captured photo
I am trying to use the Camera API for Phonegap and I am having a problem. Using code from Official Documentation:
<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) {
// 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 });
}
// 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);
}
</script>
And my button:
<button onclick="capturePhoto();">Capture Photo</button>
And the img tag:
<img style="display:none;width:60px;height:60px;" id="smallImage" src="" />
The camera opens well and no photo is captured, however it does not appear on the page.
I have more code that allows you to select an image from a photo album and this works great by displaying it in a different tag.
I believe the problem is that it cannot find imageData.
The captured photo is saved on the phone and can be displayed with another button, but I want it to be shown right after taking it.
I am using JQM btw and compiling my APK using the Phonegap: Build web compiler.
source to share
Much easier and cleaner to use the file URI (but be careful if you want the image to be saved, on iOS the images are saved to a temporary folder - http://docs.phonegap.com/en/1.7.0/cordova_camera_camera.md.html# Camera ). You can display images directly like this:
navigator.camera.getPicture(displayPicture, function(err){}, {quality : 40,
destinationType : Camera.DestinationType.FILE_URI,
sourceType : Camera.PictureSourceType.CAMERA});
function displayPicture(file_uri){
var img_tag = '<img style="width:60px;height:60px;" id="smallImage" src="'+file_uri+'" />';
//Attach the img tag where ever you want it ... $(<some parent tag>).append(img_tag) etc.
}
source to share
In the CapturePhoto () function add this option;
destinationType : Camera.DestinationType.FILE_URI,
As Phonegap says, using FILE_URI is best practice for shooting with next generation phones.
To display an image, use this approach in getPhotoDataSuccess;
$('#smallImage').attr("src",imageURI);
source to share