Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to Use Camera with PhoneGap?

    • 0
    • 1
    • 1
    • 1
    • 0
    • 0
    • 0
    • 0
    • 318
    Comment on it

    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)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: