Category: Cordova

Cordova image picker sample project

Let start step by step pure cordova image picker with crop project using Apache cordova with front end framework OnsenUI with html5 and css3.

Steps

  • Install Node.js ( If you not installed already)
  • Install cordova using cli ( If you not installed already)
  • Create cordova project using cordova
  • Adding onsenui link( You can download here if need locally)
  • Install cordova plugin for accessing camera or gallery and crop.
  • Implementation of code
  • Execute the project in Android emulator or simulator

Install Node.js

  1. Go to Node.Js website for referring different operating system(OS) installation of node.js

Install cordova globally

Go to the Terminal and type

sudo npm install -g cordova

Create cordova project

  1. Go to the folder you want to create a project in terminal
  2. Type cordova create image-picker
  3. Then go to image-picker folder you can see www folder
  4. Open index.html in any editor you want.

Adding OnsenUI to the project

<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
<!-- make sure onsenui css file is before the index.css file -->

<!-- make sure onsenui js file is after the cordova.js file -->
<script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>

Your index.html will look like

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
        <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
        <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
        <!-- make sure onsenui css file is before the index.css file -->
        <link rel="stylesheet" type="text/css" href="css/index.css">
        <title>Image picker</title>
    </head>
    <body>
        <div class="app">
            <h1>Apache Cordova</h1>
            <div id="deviceready" class="blink">
                <p class="event listening">Connecting to Device</p>
                <p class="event received">Device is Ready</p>
            </div>
        </div>
        <script type="text/javascript" src="cordova.js"></script>
        <!-- make sure onsenui js file is after the cordova.js file -->
        <script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
    </body>
</html>

Install cordova plugin

We need to install two plugins for image pick and image crop.I recommend to use plugin cordova-plugin-camera and

Got to the Project folder image-picker in terminal and type

cordova plugin add cordova-plugin-camera

After Installed cordova-plugin-camer install cropper plugin

cordova plugin add cordova-plugin-crop

Implementation of code

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
        <link rel="stylesheet" type="text/css" href="css/index.css">
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
        <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">

        <!-- make sure onsenui css file is before the index.css file -->

        <title>Image picker</title>
    </head>
    <body>

    <ons-splitter>
        <ons-splitter-side id="menu" side="left" width="75%" collapse swipeable>
            <ons-page>
                <ons-list>
                    <ons-list-item>
                       <div class="image-section" onclick="uploadImage()">
                           <span class="img-relative">
                           <img src="img/logo.png" id="profile-picture"/>
                            <span class="icon-edit"><i class="material-icons">&#xe254;</i></span>
                               </span>
                       </div>

                    </ons-list-item>
                    <ons-list-item onclick="fn.load('home.html')" tappable>
                        Home
                    </ons-list-item>
                    <ons-list-item onclick="fn.load('settings.html')" tappable>
                        Settings
                    </ons-list-item>
                    <ons-list-item onclick="fn.load('about.html')" tappable>
                        About
                    </ons-list-item>
                </ons-list>
            </ons-page>
        </ons-splitter-side>
        <ons-splitter-content id="content" page="home.html"></ons-splitter-content>
    </ons-splitter>

    <template id="home.html">
        <ons-page>
            <ons-toolbar>
                <div class="left">
                    <ons-toolbar-button onclick="fn.open()">
                        <ons-icon icon="md-menu"></ons-icon>
                    </ons-toolbar-button>
                </div>
                <div class="center">
                    Main
                </div>
            </ons-toolbar>
            <p style="text-align: center; opacity: 0.6; padding-top: 20px;">
                Swipe right to open the menu!
            </p>
        </ons-page>
    </template>

    <template id="settings.html">
        <ons-page>
            <ons-toolbar>
                <div class="left">
                    <ons-toolbar-button onclick="fn.open()">
                        <ons-icon icon="md-menu"></ons-icon>
                    </ons-toolbar-button>
                </div>
                <div class="center">
                    Settings
                </div>
            </ons-toolbar>
        </ons-page>
    </template>

    <template id="about.html">
        <ons-page>
            <ons-toolbar>
                <div class="left">
                    <ons-toolbar-button onclick="fn.open()">
                        <ons-icon icon="md-menu"></ons-icon>
                    </ons-toolbar-button>
                </div>
                <div class="center">
                    About
                </div>
            </ons-toolbar>
        </ons-page>

    </template>
        <script type="text/javascript" src="cordova.js"></script>
        <!-- make sure onsenui js file is after the cordova.js file -->
        <script src="https://unpkg.com/jquery/dist/jquery.min.js"></script>
        <script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>

        <script type="text/javascript" src="js/index.js"></script>
    </body>
</html>

index.js

var app = {
    // Application Constructor
    initialize: function() {
        document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
    },

    // deviceready Event Handler
    //
    // Bind any cordova events here. Common events are:
    // 'pause', 'resume', etc.
    onDeviceReady: function() {
        this.receivedEvent('deviceready');
    },

    // Update DOM on a Received Event
    receivedEvent: function(id) {



    }
};

app.initialize();

window.fn = {};

window.fn.open = function() {
    var menu = document.getElementById('menu');
    menu.open();
};

window.fn.load = function(page) {
    var content = document.getElementById('content');
    var menu = document.getElementById('menu');
    content.load(page)
        .then(menu.close.bind(menu));
};


function uploadImage(){
    navigator.camera.getPicture(onSuccess, onFail, {
        quality: 50,
        destinationType: Camera.DestinationType.FILE_URI,
       sourceType:Camera.PictureSourceType.PHOTOLIBRARY
//sourceType:Camera.PictureSourceType.CAMERA 
//change sourceType if you want to take a picture for profile picture
    });
}

function onSuccess(imageData) {
    console.log(imageData);
    var bloby;
    /*Crop Image Plugin Code*/
    plugins.crop(function success (data) {
 // data give the croped image then we set to the image tag
            var imgFile = document.getElementById('profile-picture');
            imgFile.src = data;


        },
        function fail () {

        }, imageData, {quality:100});
}

function onFail(message) {
    console.log('Failed because: ' + message);
}

Note: Un command the //sourceType:Camera.PictureSourceType.CAMERA in index.js file, if you want the source type from camera and delete the line sourceType:Camera.PictureSourceType.PHOTOLIBRARY

index.css

* {
    -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
}

body {
    -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
    -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
    -webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */
    background-color:#E4E4E4;
    background-image:linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
    font-family: system-ui, -apple-system, -apple-system-font, 'Segoe UI', 'Roboto', sans-serif;
    font-size:12px;
    height:100vh;
    margin:0px;
    padding:0px;
    /* Padding to avoid the "unsafe" areas behind notches in the screen */
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-right, 0px);
    text-transform:uppercase;
    width:100%;
}

/* splitter layout (default) */
#profile-picture{
    width: 100px;
    height: 100px;
    border-radius:50px;
    border:1px solid #ccc;
}
.image-section{
    text-align: center;
    position: relative;

}
.icon-edit{
    position:absolute;
    right:0;
    bottom:0;
    color:white;
    background:mediumseagreen;
    border-radius:50%;
    width:30px;
    height:30px;

}
.material-icons{
    color:#fff;
    font-size: 20px !important;
    position: relative;
    top:3px;
}

Execute the cordova project by using cli

To run the project you need to add the project type in cordova. Open image-picker folder in terminal and type

 cordova platform add android
 cordova platform add ios
  • For adding ios platform you need xcode install on your system.
  • For adding Android platform you need Android Studio with emulator to run and see the project is working fine

Note: If you need android only don’t need to add cordova platform add ios. If you need only ios don’t need to add cordova platform add android

After adding platform run below command in terminal

cordova run android

I hope this will help you! Thank you for reading. Best of Luck!