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

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);

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!