Choose an image from Camera or Gallery – PhoneGap

Require using device camera to allow the users to change or upload their image from the app either by taking a photo with the camera or choose from the photo gallery.

With camera plugin, you can access device camera to capture a picture and select existing photos from the device gallery.

It gives a response in the base64 format or path on the successful callback that can use in image source to show the preview of selected photo or save it to the server.

In this tutorial, I show how you can implement the plugin in your project and select photo with it.

Choose an image from camera or gallery - PhoneGap


Contents

  1. Add plugin
  2. Plugin Implementation
  3. Conclusion

 

1. Add plugin

  • Create a PhoneGap project and add platform in it.
F:\phonegap>cordova create myapp
F:\phonegap>cd myapp
F:\phonegap\myapp>cordova platform add android --save
  • Now add camera plugin to the project.
F:\phonegap>myapp>cordova plugin add cordova-plugin-camera
  • Copy the plugins directory from platforms/android/platform_www/ to www/ directory.

config.xml

Specify the plugin in config.xml.

<plugin name="cordova-plugin-camera" spec="1" />

 

2. Plugin Implementation

In HTML create two buttons and an image element to show image preview.

Capture image from camera –

On the button click call navigator.camera.getPicture() method which takes 3 parameters – success handler, error handler, and options.

Define destinationType option and set its value to Camera.DestinationType.FILE_URL. On its successful callback, this will return path as response and use it in <img > source.

NOTE – To get response in base64 format you need to specify the destinationType: Camera.DestinationType.DATA_URL. Using it some time crash your application or out of memory issue even in low quality.

Pick image from Gallery –

Specify sourceType: Camera.PictureSourceType.PHOTOLIBRARY and allowEdit: true in options. This will also return path as a response. By define allowEdit: true option the user can edit or crop their selected photo.

Completed Code

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'" />
        <title>PhoneGap app</title>

        <!-- Script -->
        <script type="text/javascript" src="cordova.js" ></script>
        <script type='text/javascript' src='jquery-3.0.0.js' ></script>
        <script type='text/javascript'>
        $(document).ready(function(){

            // Take photo from camera
            $('#but_take').click(function(){
                navigator.camera.getPicture(onSuccess, onFail, { quality: 20,
                    destinationType: Camera.DestinationType.FILE_URL 
                });
            });

            // Select from gallery 
            $("#but_select").click(function(){
                navigator.camera.getPicture(onSuccess, onFail, { quality: 50,
                    sourceType: Camera.PictureSourceType.PHOTOLIBRARY, 
                    allowEdit: true,
                    destinationType: Camera.DestinationType.FILE_URI
                });
            });

            // Change image source
            function onSuccess(imageData) {
                var image = document.getElementById('img');
                image.src = imageData + '?' + Math.random();;
            }

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

        });
        </script>
    </head>
    <body>
        <div style="margin:0 auto; width:30%!important;text-align: center;">
            <img src="img/cam2.jpg" id='img' style="width: 100px; height: 100px;">
        </div><br/>
        <div style="width:100%; text-align:center; padding:10px;">
            <button id='but_take'>Take photo</button>
            <button id='but_select'>Select photo from Gallery</button>
        </div>
    </body>
</html>

 

3. Conclusion

PhoneGap provides an easy way to interact with device camera with camera plugin. To store the selected file to the server require using the File Transfer plugin.

You can learn more about camera plugin from here.

In next article, I show how you can store selected image to the server.

Related Post

Spread the love

One Comment

  1. Gabriel Carvalho Gama said:

    Good afternoon, how I can take and capture a photo with a unique button?

    July 23, 2017
    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *