I am using cordova 3.5 and want to take a picture from camera and show it on bootstrap modal. In my application there is a button that will show bootstrap modal and let you choose to take a picture from camera or gallery. After you choose you will send to camera (if you choose camrea) or gallery (if you choose gallery). It works fine until this step. But after I capture from my camera or choose image from gallery, It doesn't show any image. I don't know what to do now..
This is my code for camera and gallery, I write it on head
var pictureSource; // picture source
var destinationType; // sets the format of returned value
document.addEventListener("deviceready", onDeviceReady, false);
// device APIs are available
//
var devID;
function onDeviceReady() {
pictureSource=navigator.camera.PictureSourceType;
destinationType=navigator.camera.DestinationType;
//$('#header').append("pic:" + pictureSource + " dest:" + destinationType);
}
function onPhotoDataSuccess(imageData) {
$("#addPhotoModal").modal('hide');
$("#checkinModal").modal('show');
var smallImage = document.getElementById('smallImage');
smallImage.style.display = 'block';
smallImage.src = "data:image/jpeg;base64," + imageData;
}
function onPhotoURISuccess(imageURI) {
$("#addPhotoModal").modal('hide');
$("#checkinModal").modal('show');
var largeImage = document.getElementById('largeImage');
largeImage.style.display = 'block';
largeImage.src = imageURI;
}
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 });
}
function getPhoto(source) {
// Retrieve image file location from specified source
navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,
destinationType: destinationType.FILE_URI,
sourceType: source });
}
function onFail(message) {
$('#header').append("fail" + message);
alert('Failed because: ' + message);
}
This is my first modal to choose between camera and gallery:
<div class="modal fade rate-modal-box" id="addPhotoModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title share-modal-title" id="myModalLabel">Add Photo</h4>
</div>
<div class="modal-body photo-modal-body">
<button onclick="capturePhoto();" type="button" class="btn btn-default photo-btn">Take a Photo</button><br />
<button onclick="getPhoto(pictureSource.PHOTOLIBRARY);" type="button" class="btn btn-default photo-btn">Photo Gallery</button>
</div>
<div class="modal-footer share-modal-button">
<button type="button" class="btn btn-default share-btn" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
This is the second modal that will show the image from camera and gallery
<div class="modal fade rate-modal-box" id="checkinModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title share-modal-title" id="myModalLabel">Check In At</h4>
</div>
<div class="modal-body photo-modal-body">
<img style="display:none;width:60px;height:60px;" id="smallImage" src="" />
<textarea class="form-control share-text-comment" id="comment-share" name="comment" placeholder="What do you want to share"></textarea>
</div>
<div class="modal-footer share-modal-button">
<button id="save-checkin" type="button" class="btn btn-default share-btn">Submit</button>
<button type="button" class="btn btn-default share-btn" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
And here is the function to call the bootstrap modal, I write this on body
function startModalPhoto(){
$("#addPhotoModal").modal('show');
$("#camera-btn").click(function(){
capturePhoto();
});
$("#gallery-btn").click(function(){
getPhoto(pictureSource.PHOTOLIBRARY);
});
}
I hope you can help me with this.. Thanks before..
0 comments:
Post a Comment