Take Picture using Cordova

Hey Everyone,

Thinking about accessing the device camera or gallery using PhoneGap or Cordova?. I have written a simplified step by step tutorial for you.

Before starting, we’ll understand the usage of the camera plugin

Used for accessing device camera
You can access the existing image gallery
Access image local path
Access base-64 string of that image
crop images & more

cordova plugin camera is used for getting the picture from the camera or existing gallery in Cordova applications. After taking a picture we can use FILE_URI or DATA_URI for displaying pictures to the user.

Create a new project & add a plugin

cordova create camera
cd camera
cordova platform <span class="hljs-keyword">add</span><span class="bash"> android
</span>cordova plugin <span class="hljs-keyword">add</span><span class="bash"> cordova-plugin-camera</span>

Syntax

<span class="hljs-selector-tag">navigator</span><span class="hljs-selector-class">.camera</span><span class="hljs-selector-class">.getPicture</span>(<span class="hljs-selector-tag">cameraSuccess</span>, <span class="hljs-selector-tag">cameraError</span>, <span class="hljs-selector-tag">cameraOptions</span>);

cameraOptions

by modifying cameraOptions, you can do many thing with camera plugin such as

What image type do you want? like png, jpg
do you want to edit images after taking?
do you want to save pictures inside gallery
any fixed height and width
and more (please refer plugin documentation page – http://github.com/apache/cordova-plugin-camera#cameracameraoptions–object )

Accessing device Camera

This example, we’re accessing device camera then editing that image & save that image to gallery

    <span class="hljs-keyword">var</span> cameraOptions = {
        <span class="hljs-attr">sourceType</span>: Camera.PictureSourceType.CAMERA,
        <span class="hljs-attr">saveToPhotoAlbum</span>: <span class="hljs-literal">true</span>,
        <span class="hljs-attr">allowEdit</span>: <span class="hljs-literal">true</span>
    };

    navigator.camera.getPicture(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">result</span>) </span>{
        <span class="hljs-built_in">console</span>.log(result);
        <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'image'</span>).src = result;
    }, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">error</span>) </span>{
        <span class="hljs-built_in">console</span>.log(error);
    }, cameraOptions);

Accessing device gallery

This code allows you to access the image from existing device gallery and return as base64 string, we’re displaying that string into images

Why the base64 string?

In case, If you need to store images on the database instead of the file system, you can use this (but not recommended for high-quality pictures)

    <span class="hljs-keyword">var</span> galleryOptions = {
        <span class="hljs-attr">sourceType</span>: Camera.PictureSourceType.SAVEDPHOTOALBUM,
        <span class="hljs-attr">destinationType</span>: Camera.DestinationType.DATA_URL
    };

    navigator.camera.getPicture(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">result</span>) </span>{
        <span class="hljs-built_in">console</span>.log(result);

        <span class="hljs-comment">//displaying base64 string as image</span>
        <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'image'</span>).src = <span class="hljs-string">"data:image/jpeg;base64,"</span> + result;

    }, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">error</span>) </span>{
        <span class="hljs-built_in">console</span>.log(error);
    }, galleryOptions);

Cheers!