Capture and load Image in Cordova
1. Create New Cordova Project on Visual Studio.
2. Go to Config.xml
3. Go to Plugins
4. In core, you can find Camera plugin (cordova-plugin-camera) and click on add.
you can see your installed plugin on config.xml (code view).
<plugin name="cordova-plugin-camera" spec="~2.4.1" />
5. Add one Button and one Div on your index.html
<input type="button" id="TakePhoto" value="Take Photo"/>
<div id="ViewPhoto"></div>
6.In Index.js, create Click Event on TakePhoto Button and add following code.
document.getElementById('TakePhoto').onclick = function () {
navigator.camera.getPicture(function (imageUri) {
var CapturePhoto = document.getElementById("ViewPhoto");
alert("Photo Captured");
CapturePhoto.innerHTML = "<img class='fit' src="+imageUri+" 'style' />";
}, null, null);
};
Output:
Final "Index.html" is here
<!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 *">
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>CameraApp</title>
</head>
<body>
<input type="button" id="TakePhoto" value="Take Photo"/>
<div id="ViewPhoto"></div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="scripts/platformOverrides.js"></script>
<script type="text/javascript" src="scripts/index.js"></script>
</body>
</html>
and Final "Index.js" is here
(function () {
"use strict";
document.addEventListener('deviceready', onDeviceReady.bind(this), false);
function onDeviceReady() {
var parentElement = document.getElementById('deviceready');
document.getElementById('TakePhoto').onclick = function () {
navigator.camera.getPicture(function (imageUri) {
var CapturePhoto = document.getElementById("ViewPhoto");
alert("Photo Captured");
CapturePhoto.innerHTML = "<img class='fit' src="+imageUri+" 'style' />";
}, null, null);
};
};
} )();
