在AngularJS中将图像转换为Base64

Question

我有一个需求，用户将上传他们的图像，我需要将其转换成一些内容并发送到.NET RESTful服务。我不熟悉AngularJS，请问有人能帮忙吗？

- user2610160

---

可能是重复的问题：如何使用JavaScript将图像转换为Base64字符串 - user700284

检查这个链接：https://dev59.com/xGMm5IYBdhLWcg3whfSe - Satya

Answer 1

从这里开始回答https://dev59.com/xGMm5IYBdhLWcg3whfSe#24880314

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'])

- Jaanus

---

这个插件编码的是我的图片URL，而不是实际的图片。 - Nick

Answer 2

您可以使用Angular自定义指令将图像转换为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>

现在您需要在控制器中添加代码，用于将图像或文件存储到数据库中。

- Bipin Shilpakar

Answer 3

如果您的图像数据已经是base64格式，请尝试：

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

- Carlos Casalicchio

---

虽然从理论上讲这不是错误的，但这与原帖所询问的相反。 - Desmond

Answer 4

在Angularjs中上传64位图像的代码

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>

Angular 代码：

 $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

- vikas singh

---

提示：预览窗口存在是有原因的。不要在此处放置实际上无法读取的代码（例如您拥有的那些HTML部分）！ - GhostCat