how to convert image into base64 string? - angularjs

Question

hello I am trying to make simple application in ionic using camera or select file from gallery or file system and send to / or upload to a server.
I found one plugin which capture one image and send base64 string
here is plugin
http://ngcordova.com/docs/plugins/camera/
using this I am able to get 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 string I used to send to server
But my problem is that when I use this plugin image gallary plugin
http://ngcordova.com/docs/plugins/imagePicker/
it send me only image url (where is in memory) .can we get base64 string after selecting the image from 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 using camera I am getting base64 string as shown above.But when I use image picker plugin I am getting image url.can I get base64 string .so that I am able to send or upload on server .
how to convert image url to base64 string ?

Answer 1

Try this 100% working code. First you have to Download 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>

Answer 2

To convert image to base64 you can use HTML5 canvans as mention in
How to convert image into base64 string using javascript
Please refer above 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;
}