Geek Answers Handbook

How to convert image to base64 string?

Hi I am trying to make a simple application in the ion chamber or select a file from the gallery or file system and send / upload to the server. I found one plugin that captured one image and sent the base64 string here is the plugin http://ngcordova.com/docs/plugins/camera/ using this, I can get the base64 string

$cordovaCamera.getPicture(options).then(function(imageData) { var image = document.getElementById('myImage'); image.src = "data:image/jpeg;base64," + imageData; }, function(err) { // error });

that base64 is the string that I used to send to the server

But my problem is that when I use this plugin for plugin plugin plugins

http://ngcordova.com/docs/plugins/imagePicker/ it sends me only the url image (where it is in memory). can we get the base64 string after selecting the image from the image picker.

 $cordovaImagePicker.getPictures(options) .then(function (results) { for (var i = 0; i < results.length; i++) { console.log('Image URI: ' + results[i]); } }, function(error) { // error getting photos });

In other words, when I use the camera, I get a base64 string as shown above. But when I use the plugin to select images, I get the url.can image, I get the base64 string. So that I can send or upload to the server. how to convert image url to base64 string?

+4
source share
2 answers

Try this 100% working code. First you must download the ngCordova.min.js file and include it in your index.html file. Follow this code.

 angular.module('starter.controllers', []) .controller('DashCtrl', function($scope,$cordovaCamera) { $scope.imgUrl; $scope.dataImg; $scope.tackPicture = function(){ var options = { quality: 50, destinationType: Camera.DestinationType.DATA_URL, sourceType: Camera.PictureSourceType.CAMERA, allowEdit: true, encodingType: Camera.EncodingType.JPEG, targetWidth: 100, targetHeight: 100, popoverOptions: CameraPopoverOptions, saveToPhotoAlbum: false, correctOrientation:true }; $cordovaCamera.getPicture(options).then(function(imageData) { //var image = document.getElementById('myImage'); $scope.dataImg = imageData; // <--- this is your Base64 string $scope.imgUrl = "data:image/jpeg;base64," + imageData; }, function(err) { // error }); } }) .controller('ChatsCtrl', function($scope, Chats) { // With the new view caching in Ionic, Controllers are only called // when they are recreated or on app start, instead of every page change. // To listen for when this page is active (for example, to refresh data), // listen for the $ionicView.enter event: // //$scope.$on('$ionicView.enter', function(e) { //}); $scope.chats = Chats.all(); $scope.remove = function(chat) { Chats.remove(chat); }; }) .controller('ChatDetailCtrl', function($scope, $stateParams, Chats) { $scope.chat = Chats.get($stateParams.chatId); }) .controller('AccountCtrl', function($scope) { $scope.settings = { enableFriends: true }; }); 
 <ion-view view-title="Dashboard"> <ion-content class="padding"> <button class="button icon-left ion-ios-camera button-block button-positive" ng-click="tackPicture()"> OPEN CAMERA </button> <div class="item item-avatar"> <img ng-src="{{ imgUrl }}"> <p>{{ dataImg }}</p> </div> </ion-content> </ion-view>
+2
source

To convert an image to base64, you can use HTML5 canisters as mentioned in

How to convert image to base64 string using javascript

Please refer to the question

Use this code

 /** * Convert an image * to a base64 url * @param {String} url * @param {Function} callback * @param {String} [outputFormat=image/png] */ function convertImgToBase64URL(url, callback, outputFormat){ var img = new Image(); img.crossOrigin = 'Anonymous'; img.onload = function(){ var canvas = document.createElement('CANVAS'), ctx = canvas.getContext('2d'), dataURL; canvas.height = this.height; canvas.width = this.width; ctx.drawImage(this, 0, 0); dataURL = canvas.toDataURL(outputFormat); callback(dataURL); canvas = null; }; img.src = url; }
+2
source

More articles:


All Articles