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

Question

I'm using this tool to crop images in my AngularJS app: https://github.com/fengyuanchen/cropper

and then I try to store data to server, but now I send base64 code... How could I send normal cropped image binary code, not as base64? is it real?

my code for uploading is such:

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

and here I send base64 code:

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

and

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

how could I send like I do without any croping: send image file, so that i could go via link in browser and see image, but not a byte64 code???

Wouldn't it be easier to send base64 and use Image manipulation functions at server end to create image file and save? — geekman
– geekman, Commented Jan 30, 2015 at 21:09
I did not understand what exactly you want to do. you want to save the image to server or simply show it on page? — geekman
– geekman, Commented Jan 30, 2015 at 21:21
Found this genius solution : blog.danguer.com/2011/10/24/… — geekman
– geekman, Commented Jan 30, 2015 at 21:33

Rebornix · Accepted Answer · 2015-01-31 02:01:19Z

2

+50

You can wrap the base64 data in ArrayBuffer then convert to binary Image data like:

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

I suppose uintArray is what you want.

answered Jan 31, 2015 at 2:01

Rebornix

5,2701 gold badge25 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

byCoder Over a year ago

Please add query example

Rebornix Over a year ago

what do you mean by "query example"? It seems your question is how to send normal cropped image binary

byCoder Over a year ago

i mean post http query. Will it be ok to send as param uintArray ?

Rebornix Over a year ago

@brabertaser1992 sorry I'm not sure. But you can refer to this library (line 30 - 70) about how to send file binary to backend server. I'll update my answer if I have any idea.

byCoder Over a year ago

Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded.

|

Collectives™ on Stack Overflow

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

1 Answer 1

6 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Linked

Related