Upload image from mobile

HTML

<script id="my-modal.html" type="text/ng-template">
    <ion-modal-view class="ion-nifty-modal">
        <div class="ion-modal-content-custom">
            <ion-content class="padding">
                <div id="dvGallery" style="border-bottom: 1px solid #f1f1f1;" ng-click="getPhoto();">                  
                    <img src="img/gallery.png" style="padding: 20px 20px;cursor: pointer;height: 100px;" />
                    <h3 style="display:inline;display: inline;margin-top: 35px;position: absolute;color: white;">Gallery</h3>
                </div>
                <div>&nbsp;</div>
                <div id="dvCamera" ng-click="capturePhoto();">
                    <img src="img/camera.png" style="padding: 20px 20px;cursor: pointer;height: 100px;" />
                    <h3 style="display:inline;    display: inline;margin-top: 35px;position: absolute;color: white;">Camera</h3>                  
                </div>
            </ion-content>
        </div>
    </ion-modal-view>

</script>

<ion-view view-title="Me" hide-nav-bar="true" hide-back-button="true">
    <ion-content class="post-content has-header has-subheader" delegate-handle="mainScroll">
        <div id="content">
            <div id="profile-info">              
                <canvas id="imgUser" class="divImage img-circle" style="display:none" ng-click="openModal(class)" ></canvas>              
                <img id="profile-image" class="profileImage" ng-click="openModal(class)" ng-src="http://www.healthcare4free.com/{{profile.userimageurl}}">
                <h3 id="profile-name">{{profile.firstname==null?profile.Email:profile.firstname}}</h3>
            </div>
        </div>    
    </ion-content>
</ion-view>

Controller

controller('UserProfileCtrl', ['$state', '$scope', 'RequestData', '$ionicLoading', '$ionicModal', function ($state, $scope, RequestData, $ionicLoading, $ionicModal) {
    //Model popup class define
    $scope.modalClasses = ['slide-in-up', 'slide-in-down', 'fade-in-scale', 'fade-in-right', 'fade-in-left', 'newspaper', 'jelly', 'road-runner', 'splat', 'spin', 'swoosh', 'fold-unfold'];
    //On successfully uploading image from gallry or camera
    $scope.onPhotoURISuccess = function (imageURI) {
        var canvas = document.getElementById("imgUser");
        var ctx = canvas.getContext("2d");
        var cw = canvas.width;
        var ch = canvas.height;
        var maxW = 200;
        var maxH = 200;
        var img = new Image;
        img.onload = function () {
            var iw = img.width;
            var ih = img.height;
            var scale = Math.min((maxW / iw), (maxH / ih));
            var iwScaled = iw * scale;
            var ihScaled = ih * scale;
            canvas.width = iwScaled;
            canvas.height = ihScaled;
            ctx.drawImage(img, 0, 0, iwScaled, ihScaled);
            var dataURL = canvas.toDataURL("image/jpeg");
            base64(dataURL.slice(22, dataURL.length));
        }      
        img.src = "data:image/jpeg;base64," + imageURI;      
        $('#imgUser').css('display', 'block');
        $('.profileImage').css('display', 'none');

     
        $scope.closeModal();
    }
    //get photo from galary
    $scope.getPhoto = function () {
        navigator.camera.getPicture($scope.onPhotoURISuccess, $scope.onFail, {
            quality: 50,
            destinationType: destinationType.DATA_URL,
            sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY
        });
    }
    //capturing photo from camera
    $scope.capturePhoto = function () {
        navigator.camera.getPicture($scope.onPhotoURISuccess, $scope.onFail, {
            quality: 50,
            destinationType: destinationType.DATA_URL
        });
    }
    //on fail of capturing or selecting image from camera
    $scope.onFail = function (message) {
        alert(message);
    }
    //open popup model
    $scope.openModal = function (animation) {
        $ionicModal.fromTemplateUrl('my-modal.html', {
            scope: $scope,
            animation: animation
        }).then(function (modal) {
            $scope.modal = modal;
            $scope.modal.show();
        });
    };
    //close popup model
    $scope.closeModal = function () {
        $scope.modal.hide();
    };
    //Cleanup the modal when we're done with it!
    $scope.$on('$destroy', function () {
        $scope.modal.remove();
    });
    // Execute action on hide modal
    $scope.$on('modal.hidden', function () {
        // Execute action
    });
    // Execute action on remove modal
    $scope.$on('modal.removed', function () {
        // Execute action
    });
    var userId = JSON.parse(sessionStorage.UserData).UserId;
    $ionicLoading.show();
    $scope.updateUser= function ()
    {
        var canvasUser = document.getElementById("imgUser");
        var pass = canvasUser.toDataURL();
        if (pass.length > 0) {
            pass = pass.replace(/data:image\/jpeg;base64,/g, '');
            pass = pass.replace(/data:image\/png;base64,/g, '');
        }
        var promisePost= SetData.updateProfile(userId, pass);


    }


//WebAPi

 #region SaveImage
                    var bytes = Convert.FromBase64String(userResult.File);
                    string path = System.Web.HttpContext.Current.Server.MapPath("~/UserImages") + "\\" + users.UserId;

                    if (!System.IO.Directory.Exists(path))
                        System.IO.Directory.CreateDirectory(path);

                    using (var ms = new MemoryStream(bytes, 0, bytes.Length))
                    {
                        Image image = Image.FromStream(ms, true);
                        image.Save(path + "\\" + "profile.png", System.Drawing.Imaging.ImageFormat.Png);
                    }

                    #endregion

//For Ionic Model

<link href="nifty.modal.css" rel="stylesheet" />

//Model Css


.ion-nifty-modal {
  width: 90%;
  min-height: 0 !important;
  height: 300px !important;
  top: 25%;
  left: 5%;
  right: 5%;
  bottom: 5%;
  background-color: transparent;
  border-radius: 10px;
  -webkit-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5); }

.ion-nifty-modal .ion-modal-content-custom {
  width: 100%;
  height: 100%;
  color: #FFF;
  background-color: #333;/*white;*/
  border-radius: 10px; }

/* Fix modal backdrop for smaller devices */
@media (max-width: 679px) {
  .active .modal-backdrop-bg {
    opacity: .5; }
  .modal-backdrop-bg {
    -webkit-transition: opacity 300ms ease-in-out;
    transition: opacity 300ms ease-in-out;
    background-color: #000;

    opacity: 0; } }