convert image to base64 in angularjs - angularjs

Question

I have a requirement where user will upload their image and i have to convert it into something and send it to .Net REStful service. I am new to angular js. Could someone please help

Answer 1

Answer from here https://stackoverflow.com/a/24880314/625189
I would recommend you to use
https://github.com/ninjatronic/angular-base64.
After following instructions for using this library, you can simply
call:
var imageData=$base64.encode(image);
Don't forget to inject in your module:
.module('myApp', ['base64'])

Answer 2

You can use the angular custom directive to convert the image base64.
directive.js
myApp.directive('imgUpload', ['$rootScope',function (rootScope) {
return {
restrict: 'A',
link: function (scope, elem, attrs) {
var canvas = document.createElement("canvas");
var extensions = 'jpeg ,jpg, png, gif';
elem.on('change', function () {
reader.readAsDataURL(elem[0].files[0]);
var filename = elem[0].files[0].name;
var extensionlist = filename.split('.');
var extension =extensionlist[extensionlist.length - 1];
if(extensions.indexOf(extension) == -1){
alert("File extension , Only 'jpeg', 'jpg', 'png', 'gif', 'bmp' are allowed.");
}else{
scope.file = elem[0].files[0];
scope.imageName = filename;
}
});
var reader = new FileReader();
reader.onload = function (e) {
scope.image = e.target.result;
scope.$apply();
}
}
}
}]);
Html:
<div class="input-group">
<input id="image" class="hidden" type="file" img-upload ng-model="imageName" name="imageName">
<img ng-src="{{image}}" height="100" width="100" ng-show="image"/>
<label for="image" class="btn btn-success btn-xs pull-center" name="upload" Value="">Upload Photo</label>
</div>
Now you need to add your code in controller which works for storing image or file in database.

Answer 3

If your image data is already in base64, try
<img alt="{{p.alt}}" data-ng-src="{{'data:image/png;base64,'+p.Photo}}" class="photo" />

Answer 4

Code to upload the image in 64 bit in Angularjs
Html code
<div class="col-md-8">
<img ng-src="data:image/png;base64,{{model.Logo}}" id="photo-id" />
<input type="file" name="file" onchange="angular.element(this).scope().uploadFile(this)" id="photo-upload" />
</div>
Angular code:
$scope.uploadFile = function (input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.readAsDataURL(input.files[0]);
reader.onload = function (e) {
$('#photo-id').attr('src', e.target.result);
var canvas = document.createElement("canvas");
var imageElement = document.createElement("img");
imageElement.setAttribute = $('<img>', { src: e.target.result });
var context = canvas.getContext("2d");
imageElement.setAttribute.load(function()
{
debugger;
canvas.width = this.width;
canvas.height = this.height;
context.drawImage(this, 0, 0);
var base64Image = canvas.toDataURL("image/png");
var data = base64Image.replace(/^data:image\/\w+;base64,/, "");
$scope.model.Logo = data;
});
}
}
}
for more go to link:
http://vikasbishtangular.blogspot.in/2017/04/code-to-upload-image-in-64-bit-in.html