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
- 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
- Go to the folder you want to create a project in terminal
- Type
cordova create image-picker
- Then go to image-picker folder you can see www folder
- 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"></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!