chuyển đổi hình ảnh thành base64 trong angularjs

Question

Tôi có một yêu cầu mà người dùng sẽ tải lên hình ảnh của họ và tôi phải chuyển đổi nó thành một cái gì đó và gửi nó đến dịch vụ .Net REStful. Tôi mới đến js góc. ai đó có thể xin vui lòng giúp

Answer 1

trả lời từ đây https://stackoverflow.com/a/24880314/625189

tôi sẽ khuyên bạn nên sử dụng https://github.com/ninjatronic/angular-base64.

Sau khi hướng dẫn sử dụng thư viện này sau đây, bạn có thể chỉ đơn giản là gọi:

var imageData=$base64.encode(image); 

Đừng quên tiêm trong module của bạn:

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

Answer 2

Nếu dữ liệu hình ảnh của bạn đã trong base64, hãy thử

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

Answer 3

Bạn có thể sử dụng chỉ thị tùy chỉnh góc để chuyển đổi hình ảnh 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> 

Bây giờ bạn cần phải thêm mã của bạn trong bộ điều khiển mà làm việc cho lưu trữ hình ảnh hoặc tập tin trong cơ sở dữ liệu.

Answer 4

Mã để tải lên các hình ảnh trong 64 bit trong Angularjs

đang

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> 

đang kiễu góc:

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



       } 


      } 
     } 

để biết thêm đi đến liên kết: http://vikasbishtangular.blogspot.in/2017/04/code-to-upload-image-in-64-bit-in.html