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