Convert base64 to image file in AngularJS

I’m using ngImgCrop plugin for image crop and post to my rest service. HTML like this:

<form>
          <button class="btn btn-default fileUpload" type="submit"><span>from pc</span>
            <input type="file"
                   id="fileInput"
                   class="upload"
                   onchange="angular.element(this).scope().uploadFile(this.files[0])"/></button>
          <button class="btn btn-default" type="submit">from camera</button>

          <div class="cropArea">
            <img-crop image="image.myImage" result-image="image.myCroppedImage"></img-crop>
          </div>
          <div class="hidden"><img ng-src="{{image.myCroppedImage}}" ng-model="updatedPhoto" /></div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal" ng-click="closeThisDialog(value)">Close
            </button>
            <button type="submit" ng-click="updatePhoto()" class="btn btn-primary">Save</button>
        </form>

And controller.js:

$scope.updatePhoto = function () {
      var updatedPhotoLink = {
      file: file
    };
      $http({
        method: 'POST',
        data:  updatedPhotoLink,
        url: '//myapiservices.com/upload'
      }).then(function successCallback(response) {
       console.log(response);
      }, function errorCallback(response) {
        console.log("error");
        // called asynchronously if an error occurs
        // or server returns response with an error status.
      });
    }

Yes, it works but image link return to by base64 but API link want to it by file.

I tried to add for change this:

      var imageBase64 = $scope.image.myCroppedImage;
      var blob = new Blob([imageBase64], {type: 'image/png'});

But its not worked, image file return to blank. How can I convert base64 url to file? Thanks.

Answer

check out this link.

function getBase64Image(base64string) {
    return base64string.replace(/^data:image/(png|jpg);base64,/, "");
}
var imgData = JSON.stringify(getBase64Image(/* base64string */));
$.ajax({
url: 'http://url.com/rest/api',
dataType: 'json',
data: imgData,
type: 'POST',
 success: function(data) {
  console.log(data);
}
});

this is an example of uploading a image base64 to server, its a bit difference for what you doing but its do the trick.

instead of sending the href of the image you send only the base64 without the metadata in the beginning of the convert base64. you define to contentType:json and you send it to the server.

in the server side you get the base64 (witch it actually a string that represent a bit array) and convert it but to an image (php convert base64)

Leave a Reply

Your email address will not be published. Required fields are marked *