I am currently working on developing a mobile application using PhoneGap for Android. One of the tasks I am trying to accomplish is setting the background of a div element to the photo captured using the device's camera.
The camera functionality is working smoothly with the provided code. However, my goal is to automatically set the background image of the body div to the captured photo immediately after it is taken, rather than just displaying it to the user.
var pictureSource;
var destinationType;
document.addEventListener("deviceready",onDeviceReady,false);
function onDeviceReady() {
pictureSource=navigator.camera.PictureSourceType;
destinationType=navigator.camera.DestinationType;
}
function onPhotoDataSuccess(imageData) {
var smallImage = document.getElementById('smallImage');
smallImage.style.display = 'block';
smallImage.src = "data:image/jpeg;base64," + imageData;
$('#wrapper').css("background-image", "url(imageData.jpg)");
}
function onPhotoURISuccess(imageURI) {
var largeImage = document.getElementById('largeImage');
largeImage.style.display = 'block';
largeImage.src = imageURI;
}
function capturePhoto() {
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50 });
}
function capturePhotoEdit() {
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true });
}
function getPhoto(source) {
navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,
destinationType: destinationType.FILE_URI,
sourceType: source });
}
function onFail(message) {
alert('Failed because: ' + message);
}
Previously, I attempted to set the background using this line of code:
$('#wrapper').css("background-image", "url(imageData.jpg)")
Any assistance or suggestions would be greatly appreciated.