Rohan mal Rohan mal - 6 months ago 315
AngularJS Question

How to get device camera and open file browser to upload image in ionic?

I am new to ionic and I want my app to use the device camera and also to upload or select file from gallery.

Is there any plugin for this?

Answer

Install cordova camera plugin first. you can find it here. or just type this in your command prompt.

cordova plugin add cordova-plugin-camera

include

cordova.min.js

in your page before cordova.js. you can find it here.

The following code will do it

//Add this to your app.js file

.controller("ExampleController", function ($scope, $cordovaCamera) {
 
                $scope.takePhoto = function () {
                  var options = {
                    quality: 75,
                    destinationType: Camera.DestinationType.DATA_URL,
                    sourceType: Camera.PictureSourceType.CAMERA,
                    allowEdit: true,
                    encodingType: Camera.EncodingType.JPEG,
                    targetWidth: 300,
                    targetHeight: 300,
                    popoverOptions: CameraPopoverOptions,
                    saveToPhotoAlbum: false
                };
   
                    $cordovaCamera.getPicture(options).then(function (imageData) {
                        $scope.imgURI = "data:image/jpeg;base64," + imageData;
                    }, function (err) {
                        // An error occured. Show a message to the user
                    });
                }
                
                $scope.choosePhoto = function () {
                  var options = {
                    quality: 75,
                    destinationType: Camera.DestinationType.DATA_URL,
                    sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
                    allowEdit: true,
                    encodingType: Camera.EncodingType.JPEG,
                    targetWidth: 300,
                    targetHeight: 300,
                    popoverOptions: CameraPopoverOptions,
                    saveToPhotoAlbum: false
                };
   
                    $cordovaCamera.getPicture(options).then(function (imageData) {
                        $scope.imgURI = "data:image/jpeg;base64," + imageData;
                    }, function (err) {
                        // An error occured. Show a message to the user
                    });
                }
            })
//Add this to your index.html file

<div ng-controller="ExampleController" padding="true">

  <div class="row padding">

    <div class="col col-50">
      <button class="button icon icon-left  ion-camera button-positive" ng-click="takePhoto()">
      Take Photo
      </button>
    </div>

    <div class="col col-50">
      <button class="button icon icon-left  ion-images button-positive" ng-click="choosePhoto()">
      Choose Photo
      </button>
    </div>

  </div>

  <div class="list card">
    <div class="item item-image">
      <img ng-show="imgURI !== undefined" ng-src="{{imgURI}}" style="text-align: center">
    </div>
  </div>

</div>

Comments