209 IonicV1 Creator Ionic Native Camera

.

209 IonicV1 Creator Ionic Native Camera

1. Create a project.

Eg IonNatCam1

2. Add ionic native to the project.

Get ionic native v.2.0.9 codes from here (github) or here (gdrive)

Create a new JS file.

Paste the codes to JS File.

Add the module ionic.native to angular modules.

3. Add Cordova Plugin.

cordova-plugin-camera

4. Add Components to Layout

Button Bar (by default, it consists of three buttons so delete the third button).

Image.

Upload the following imageplaceholder.

(blankimage.png)

Set the Directive for the Button 1 as follows:

ng-click, captureImage()

Set the Directive for the Button 2 as follows:

ng-click, openImage()

Set the Directive for the image component as follows:

ng-src, {{data.image}}

5. Add test codes to Controller.

function ($scope, $stateParams) {     $scope.data={image:"https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/SNice.svg/220px-SNice.svg.png"} }

Outcome.

(The imageplaceholder is replaced by a smiley)

6. Add camera codes to Controller.

function ($scope, $stateParams, $cordovaCamera) {    $scope.data={image:"https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/SNice.svg/220px-SNice.svg.png"} $scope.captureImage=function(){        document.addEventListener("deviceready", function () {    var options = {      quality: 50,      destinationType: Camera.DestinationType.DATA_URL,      sourceType: Camera.PictureSourceType.CAMERA,      allowEdit: true,      encodingType: Camera.EncodingType.JPEG,      targetWidth: 100,      targetHeight: 100,      saveToPhotoAlbum: false,           correctOrientation:true    };    $cordovaCamera.getPicture(options).then(function(imageData) {      $scope.data.image= "data:image/jpeg;base64," + imageData;    }, function(err) {      // error    });  }, false); } $scope.openImage=function(){  document.addEventListener("deviceready", function () {    var options = {        // Some common settings are 20, 50, and 100        quality: 50,        destinationType: Camera.DestinationType.FILE_URI,        // In this app, dynamically set the picture source, Camera or photo gallery        sourceType: Camera.PictureSourceType.SAVEDPHOTOALBUM,        encodingType: Camera.EncodingType.JPEG,        mediaType: Camera.MediaType.PICTURE,        allowEdit: true,        correctOrientation: true  //Corrects Android orientation quirks    }    $cordovaCamera.getPicture(options).then(function(imageURI) {       $scope.data.image = imageURI;    }, function(err) {      // error    });    //$cordovaCamera.cleanup().then(); /* only for FILE_URI*/  }, false); } }

Reference:

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

.