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

Posted 2023-02-25

【中文标题】angularJS 从 base64 制作二进制数据图像并作为图像文件发送到服务器

【英文标题】：angularJS make binary data image from base64 and send as image file to server

【发布时间】：2015-01-25 14:23:28

【问题描述】：

我正在使用这个工具在我的 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();
  );
  ...

如何在没有任何裁剪的情况下像我一样发送：发送图像文件，以便我可以通过浏览器中的链接查看图像，但不是 byte64 代码？？？

【问题讨论】：

发送base64并在服务器端使用图像处理功能创建图像文件并保存不是更容易吗？

@geekman no - 服务器不会改变...

我不明白你到底想做什么。您想将图像保存到服务器还是简单地显示在页面上？

找到了这个天才解决方案：blog.danguer.com/2011/10/24/…

【参考方案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 是你想要的。

【讨论】：

请添加查询示例

“查询示例”是什么意思？看来你的问题是how to send normal cropped image binary

我的意思是发布 http 查询。可以作为 param uintArray 发送吗？

@brabertaser1992 抱歉，我不确定。但是你可以参考这个library（第30-70行）关于如何将文件二进制发送到后端服务器。如果我有任何想法，我会更新我的答案。

在 'Window' 上执行 'atob' 失败：要解码的字符串没有正确编码。