convertire l'immagine in base64 in angularjs

Question

Ho un requisito in cui l'utente caricherà la propria immagine e devo convertirla in qualcosa e inviarla al servizio .Net REStful. Sono nuovo di angular js. Qualcuno potrebbe aiutare

Answer 1

Risposta da qui https://stackoverflow.com/a/24880314/625189

ti consiglierei di utilizzare https://github.com/ninjatronic/angular-base64.

Dopo aver seguito le istruzioni per l'utilizzo di questa libreria, si può semplicemente chiamata:

var imageData=$base64.encode(image); 

Non dimenticate di iniettare nel vostro modulo:

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

Answer 2

Se i dati di immagine è già in base64, prova

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

Answer 3

È possibile utilizzare la direttiva personalizzata angolare per convertire l'immagine 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> 

Ora è necessario aggiungere il codice controller che funziona per la memorizzazione di file di immagine o nel database.

Answer 4

codice per caricare l'immagine a 64 bit in Angularjs

codice

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> 

codice angolare:

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



       } 


      } 
     } 

per di più vai al link: http://vikasbishtangular.blogspot.in/2017/04/code-to-upload-image-in-64-bit-in.html