Cordova Plugin Camera make base64 image that couldn't be decoded

cordova
1

I have a problem when try to encode jpeg image into base64 in cordova-plugin-camera. It cannot be decoded into image

I install cordova plugin add cordova-plugin-camera in ionic project

My Setup

ionic version : 1.7.11

cordova version : 5.4.1

My Files

-------------------- index.html -------------------------

I add two lib

<script src="lib/ngCordova/dist/ng-cordova.js"></script> 
<script src="cordova.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>

-------------------- js/app.js ------------------------------

var myApp = angular.module('starter', ['ionic', 'starter.controllers', 'ionic-datepicker', 'ngCordova'])
.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if (window.cordova && window.cordova.plugins.Keyboard) {
        cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
       cordova.plugins.Keyboard.disableScroll(true);

   }

  if (window.StatusBar) {
    // org.apache.cordova.statusbar required
    StatusBar.styleDefault();
  }
 });
})

.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider

 .state('app', {
    url: '/app',
    abstract: true,
    templateUrl: 'templates/login.html',
    controller: 'AppCtrl'
})
// if none of the above states are matched, use this as the fallback
   $urlRouterProvider.otherwise('/app/playlists');
});

myApp.config(function($compileProvider){
    $compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/);
})

---------------------- js/controller.js ---------------------------

angular.module('starter.controllers', [])

.controller('AppCtrl', function($scope, $ionicModal
      , $timeout, $ionicPopup, $http
      , $location, $state, $ionicLoading
      , $window, $cordovaCamera, $ionicPlatform) {

// Form data for the login modal
$scope.lastPhoto = "";

$scope.choosePicture = function(){
    $ionicPlatform.ready(function() {

    var options = {
        quality: 70,
        destinationType: Camera.DestinationType.DATA_URL,
        sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
        allowEdit: false,
        encodingType: Camera.EncodingType.JPEG,
        targetWidth: 200,
        targetHeight: 200,
        correctOrientation:true
    };

        $cordovaCamera.getPicture(options).then(function(imageData) {
            $scope.lastPhoto = "data:image/jpeg;base64," + imageData;

            var validatePopup = $ionicPopup.alert({
                title: 'show encoded string',
                template: imageData
            });

            validatePopup.then(function(res) {
                console.log('Finished encoded');
            });

            $http.get('http://192.168.0.116/api/inserttemp?params='+imageData).then(function (resp){
                console.log('send encoded string to server success', resp);
            }, function(err) {
                console.log('there is an error in api');
            });
        }, function(err) {
            console.log('there is an error in camera');
        });

    }, false);
  };
 };
})

--------------------------- /templates/login.html ---------------------

<ion-modal-view>
  <ion-header-bar>
    <h1 class="title title-center">Image Base 64</h1>
    <div class="buttons">
      <button class="button button-clear" ng-click="closeLogin()">Exit</button>
    </div>
  </ion-header-bar>
  <ion-content>
   <form ng-submit="">
      <div class="list">
        <div style="width:100%;">
          <img id="pictProfile" data-ng-src="{{lastPhoto}}" ng-src="{{lastPhoto}}" style="display: block;margin-left: auto;margin-right: auto">
       </div>
        <button style="padding-left:20px;margin-padding:20px;" ng-click="choosePicture()" class="button button-block button-positive" type="button">Choose Picture</button>      
      </div>
    </form>
  </ion-content>
</ion-modal-view>

When i try to encode image from here
// http://coenraets.org/blog/wp-content/uploads/2013/11/cordova.jpg

it show different encoded string with using this online tools

I try to decode base64 with this online tools

Have anyone similar issue with this?

I appreciate any help Thanks

Best Regard, Nirwan

2

@nirwannursabda - In your particular case, you could write the image to a canvas and read from it to get to where you want, plus it provides other benefits as well.

In the alternate, you can consider using ‘Onymos Media Component’ that solves this issue, on both iOS and Android on different OS versions and device formats… plus many other issues related to Media.