конвертировать изображение в base64 в angularjs

Question

У меня есть требование, когда пользователь загрузит свое изображение, и мне нужно его преобразовать во что-то и отправить его в .Net REStful service. Я новичок в угловых js. Может кто-то пожалуйста, помогите

Answer 1

Ответ здесь https://stackoverflow.com/a/24880314/625189

Я бы порекомендовал вам использовать https://github.com/ninjatronic/angular-base64.

После выполнения инструкции по использованию этой библиотеки, вы можете просто вызов:

var imageData=$base64.encode(image); 

Не забудьте впрыснуть в модуле:

.module('myApp', ['base64']) 

Answer 2

Если данные изображения уже в базе64, попробуйте

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

Answer 3

Вы можете использовать угловую пользовательскую директиву для преобразования изображения 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> 

Теперь вам нужно добавить код в контроллер, который работает для хранения изображения или файла в базе данных.

Answer 4

код, чтобы загрузить изображение в 64 бит в Angularjs

Html код

<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> 

Угловой код:

$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; 
        }); 



       } 


      } 
     } 

больше перейдите по ссылке: http://vikasbishtangular.blogspot.in/2017/04/code-to-upload-image-in-64-bit-in.html