@nirwannursabda wrote:
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.jpgit show different encoded string with using this online tools
https://www.base64-image.de/I try to decode base64 with this online tools
http://codebeautify.org/base64-to-image-converterHave anyone similar issue with this?
I appreciate any help Thanks
Best Regard, Nirwan
Posts: 1
Participants: 1