Hello Readers,
This blog will demonstrate Camera functionality in cordova application.
So lets start
First of all, you need to install following plug-in through CLI (Command Line Interface)
$ cordova plugin add org.apache.cordova.camera
Quick example:
HTML Code:-
<!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">
</head>
<body>
<button id="capturePhoto">Capture Photo</button> <br>
<button id="capturePhotoEdit">Capture Editable Photo</button> <br>
<button id="getPhoto">
From Photo Library
</button>
<br>
<img style="display:none;width:60px;height:60px;" id="smallImage" src="" />
</body>
</html>
JAVASCRIPT Code:-
// to capture Photo
$( document ).on( "click", "#capturePhoto", function() {
var options = {
quality: 50,
destinationType : navigator.camera.DestinationType.FILE_URI,
sourceType: navigator.camera.PictureSourceType.CAMERA,
encodingType: navigator.camera.EncodingType.JPEG,
}
navigator.camera.getPicture(onSuccess, onFail, options);
function onSuccess(imageData){
var image = imageData;
smallImage.src = imageData;
}
function onFail(message){
alert('Failed because: ' + message);
}
})
// to retrieve image from photo library
$( document ).on( "click", "#getPhoto", function() {
var options = {
quality: 50,
destinationType : navigator.camera.DestinationType.FILE_URI,
sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY,
encodingType: navigator.camera.EncodingType.JPEG,
}
navigator.camera.getPicture(onSuccess, onFail, options);
function onSuccess(imageData){
var image = imageData;
smallImage.src = imageData;
}
function onFail(message){
alert('Failed because: ' + message);
}
})
// to Edit Captured image from camera
$( document ).on( "click", "#capturePhotoEdit", function() {
var options = {
quality: 50,
allowEdit: true,
destinationType : navigator.camera.DestinationType.FILE_URI,
sourceType: navigator.camera.PictureSourceType.CAMERA,
encodingType: navigator.camera.EncodingType.JPEG,
}
navigator.camera.getPicture(onSuccess, onFail, options);
function onSuccess(imageData){
var image = imageData;
smallImage.src = imageData;
}
function onFail(message){
alert('Failed because: ' + message);
}
}
})
In the above code the following functions are used:
camera.getPicture() This function is used to open device's default camera Application.
camera.PictureSourceType.CAMERA() It allows the user to capture an image from device camera.
camera.PictureSourceType.PHOTOLIBRARY() It allows to retrieve an image from device photo library.
Camera Options:
Optional parameters to customize the camera settings.
{ quality : 75,
destinationType : Camera.DestinationType.DATA_URL,
sourceType : Camera.PictureSourceType.CAMERA,
allowEdit : true,
encodingType: Camera.EncodingType.JPEG,
};
quality: Quality of the saved image, expressed as a range of 0-100, where 100 is typically full resolution with no loss from file compression.
destinationType: Choose the format of the return value.
For Example: Camera.DestinationType = {
DATA_URL : 0, // Return image as base64-encoded string
FILE_URI : 1 // Return image file URI
}
sourceType: Used to set the source of the picture.
For Example: Camera.PictureSourceType = {
CAMERA : 0,
PHOTOLIBRARY : 1,
SAVEDPHOTOALBUM : 2
}
allowEdit: Allows to edit an image before selection.
EncodingType :Choose the returned image file's encoding.
For Example: Camera.EncodingType = {
JPEG : 0,// Return JPEG encoded image
PNG : 1// Return PNG encoded image
};
0 Comment(s)