angularJS 从 base64 生成二进制数据图像并作为图像文件发送到服务器

Question

我正在使用此工具在我的 AngularJS 应用程序中裁剪图像：https://github.com/fengyuanchen/cropper

然后我尝试将数据存储到服务器，但现在我发送 base64 代码...我如何发送正常裁剪图像二进制代码，而不是 base64？是真的吗？

我的上传代码是这样的：

var addImage = function(files) {
      var deferred = $q.defer();
      var fd = new FormData();      

      var blob = new Blob([files], { type : "image/png"});
      fd.append("file", blob);

      $http.post(settings.apiBaseUri + "/files", fd, {
          withCredentials: true,
          headers: {
            'Content-Type': undefined
          },
          transformRequest: angular.identity
        })
        .success(function(data, status, headers, config) {
          url = data.Url;
          deferred.resolve(url);
        })
        .error(function(err, status) {

        });
      return deferred.promise;
    };

这里我发送 base64 代码：

  $scope.photoChanged = function(files) {
    $scope.oldImg = angular.element(document.querySelector('#avatar-id'));
    $scope.files = files;        
    var reader = new FileReader();
    reader.onload = function(e) {
      $scope.imagecontent = e.target.result;
    };
    reader.readAsDataURL(files[0]);
  };

和

  $scope.setCroppedData = function(data) {
    $('#avatar-id').attr('src', data);
    $scope.nImg = new Image();
    $scope.nImg.src = data;  // data - is base64 image code
  }
  ...
  uploaderService.addImage($scope.nImg.src).then(function(url) {
    $scope.person.AvatarUrl = url;
    $scope.updateContactQuery();
  });
  ...

我怎样才能像没有任何裁剪一样发送：发送图像文件，这样我就可以在浏览器中通过 link 查看图像，而不是 byte64 代码？？？

Answer 1

您可以将 base64 数据包装在 ArrayBuffer 中，然后转换为二进制图像数据，例如：

var binaryImg = atob(base64Image);
var length = binaryImg.length;
var arrayBuffer = new ArrayBuffer(length);
var uintArray = new Uint8Array(arrayBuffer);
for (var i = 0; i < length; i++) {
    uintArray[i] = binaryImg.charCodeAt(i);
}

我想 uintArray 就是你想要的。

angularJS 从 base64 生成二进制数据图像并作为图像文件发送到服务器

angularJS make binary data image from base64 and send as image file to server

javascript

jquery

crop

angularjs