Cordova - Camera

This plugin is used for taking photos or using files from the image gallery.
Run the following code in the command prompt window to install this plugin.
C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugincamera

Now, we will create the button for calling the camera and img where the image will be displayed once taken. This will be added to index.html inside the div class = "app" element.
<button id = "cameraTakePicture">TAKE PICTURE</button>
<img id = "myImage"></img>
The event listener is added inside the onDeviceReady function to ensure that Cordova is loaded before we start using it.
document.getElementById("cameraTakePicture").addEventListener 
   ("click", cameraTakePicture); 
We will create the cameraTakePicture function that is passed as a callback to our event listener. It will be fired when the button is tapped. Inside this function, we will call the navigator.camera global object provided by the plugin API. If taking picture is successful, the data will be sent to the onSuccess callback function, if not, the alert with error message will be shown. We will place this code at the bottom of index.js.
function cameraTakePicture() { 
   navigator.camera.getPicture(onSuccess, onFail, {  
      quality: 50, 
      destinationType: Camera.DestinationType.DATA_URL 
   });  
   
   function onSuccess(imageData) { 
      var image = document.getElementById('myImage'); 
      image.src = "data:image/jpeg;base64," + imageData; 
   }  
   
   function onFail(message) { 
      alert('Failed because: ' + message); 
   } 
}
When we run the app and press the button, native camera will be triggered.
When we take and save picture, it will be displayed on screen.
The same procedure can be used for getting image from the local file system. The only difference is the function created in the last step. You can see that the sourceType optional parameter has been added.
C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugincamera

<button id = "cameraGetPicture">GET PICTURE</button>
document.getElementById("cameraGetPicture").addEventListener("click", cameraGetPicture); 

function cameraGetPicture() {
   navigator.camera.getPicture(onSuccess, onFail, { quality: 50,
      destinationType: Camera.DestinationType.DATA_URL,
      sourceType: Camera.PictureSourceType.PHOTOLIBRARY
   });

   function onSuccess(imageURL) {
      var image = document.getElementById('myImage');
      image.src = imageURL;
   }

   function onFail(message) {
      alert('Failed because: ' + message);
   }

}
When we press the second button, the file system will open instead of the camera so we can choose the image that is to be displayed.
This plugin offers lots of optional parameters for customization.
quality
Quality of the image in the range of 0-100. Default is 50.
destinationType
DATA_URL or 0 Returns base64 encoded string.
FILE_URI or 1 Returns image file URI.
NATIVE_URI or 2 Returns image native URI.
sourceType
PHOTOLIBRARY or 0 Opens photo library.
CAMERA or 1 Opens native camera.
SAVEDPHOTOALBUM or 2 Opens saved photo album.
allowEdit
Allows image editing.
encodingType
JPEG or 0 Returns JPEG encoded image.
PNG or 1 Returns PNG encoded image.
targetWidth
Image scaling width in pixels.
targetHeight
Image scaling height in pixels.
mediaType
PICTURE or 0 Allows only picture selection.
VIDEO or 1 Allows only video selection.
ALLMEDIA or 2 Allows all media type selection.
correctOrientation
Used for correcting orientation of the image.
saveToPhotoAlbum
Used to save the image to the photo album.
popoverOptions
Used for setting popover location on IOS.
cameraDirection
FRONT or 0 Front camera.
BACK or 1 Back camera.
ALLMEDIA

    45 Lectures 
     2 hours 

 Skillbakerystudios

    16 Lectures 
     1 hours 

 Nilay Mehta
 Print
 Add Notes
 Bookmark this page