Plans for Cordova Camera

Wappler General
2

Hi,
It is not too difficult to incorporate the camera in to your application.

First add the package:

cordova plugin add cordova-plugin-camera

Create a file called camera.js and add:

document.getElementById("cameraTakePicture").addEventListener

    ("click", cameraTakePicture);

function cameraTakePicture() {

    navigator.camera.getPicture(onSuccess, onFail, {

        quality: 100,

        correctOrientation: true,

        saveToPhotoAlbum: true,

        destinationType: Camera.DestinationType.DATA_URL

    });

    function onSuccess(imageData) {

        var image = document.getElementById('myImage');

        image.src = "data:image/jpeg;base64," + imageData;

    }

    function onFail(message) {

        alert('Failed because: ' + message);

    }

}

Add a button to activate the camera and a div to display the image:

<button id="cameraTakePicture">TAKE PICTURE</button>
<img id="myImage" class="img-fluid">

Then just link to the camera.js script in your page:

<script type="text/javascript" src="scripts/camera.js"></script>

Job done!

Adding the plugin:

https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-camera/

Script, Button, and Image DIV (don’t use the install camera plugin from this tutorial as it won’t work):

https://www.tutorialspoint.com/cordova/cordova_camera.htm

Should be easy enough, a few minutes is all it took.

2 Likes