web-dev-qa-db-fra.com

convertir une image en base64 en angularjs

J'ai une exigence où l'utilisateur va télécharger leur image et je dois le convertir en quelque chose et l'envoyer au service. NET RESTful. Je suis nouveau à angular js. Quelqu'un pourrait-il s'il vous plaît aider

angularjsimage-conversion
12
user2610160

Réponse d'ici https://stackoverflow.com/a/24880314/625189

Je vous recommanderais d'utiliser https://github.com/ninjatronic/angular-base64 . 

Après avoir suivi les instructions d'utilisation de cette bibliothèque, vous pouvez simplement appel:

var imageData=$base64.encode(image);

N'oubliez pas d'injecter dans votre module:

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

Vous pouvez utiliser la directive angular custom pour convertir l'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>

Maintenant, vous devez ajouter votre code dans le contrôleur qui fonctionne pour stocker une image ou un fichier dans une base de données.

2
Bipin Shilpakar

Si vos données image sont déjà en base64, essayez

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

Code pour télécharger l'image en 64 bits dans Angularjs 

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

Code angulaire:

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



                }


            }
        }

pour plus, allez au lien: http://vikasbishtangular.blogspot.fr 2017/2017/code-to-upload-image-in-64-bit-in.html

0
vikas singh