Преобразование base64 в файл изображения в AngularJS

Question

Я использую плагин ngImgCrop для обрезки изображения и сообщения для моего обслуживания отдыха. HTML как это:

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

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

Да, он работает, но ссылка на изображение возвращение к по base64, но ссылкам API хочет к нему файл.

Я пытался добавить для изменения этого:

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

Но его не работала, файл изображения возврат к пустым. Как я могу преобразовать url базы64 в файл? Благодарю.

Answer 1

чек 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); 
} 
}); 

это пример загрузив изображения base64 на сервер, его немного разницу за то, что вы делаете, но его сделать трюк.

вместо отправки href изображения, которое вы отправляете только base64 без метаданных в начале конвертирования base64. вы определяете contentType:json и отправляете его на сервер.

на стороне сервера вы получаете base64 (WITCH это на самом деле строка, которая представляет собой битовый массив) и преобразовать его, но к изображению (php convert base64)

Answer 2

Попробуйте следующее:

<img data-ng-src="data:image/png;base64,{{image.myCroppedImage}}" ng-model="updatedPhoto" /> 

Answer 3

вы добавили это:

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

прямо сейчас некоторые изменения:

var imageBase64 = $scope.image.myCroppedImage; 
var blob = this.dataURItoBlob(imageBase64); 
var image = new File([blob], 'image.png'); 

и добавить эту функцию:

dataURItoBlob(dataURI) { 
    var byteString = atob(dataURI.toString().split(',')[1]); 

    //var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]; 

    var ab = new ArrayBuffer(byteString.length); 
    var ia = new Uint8Array(ab); 
    for (var i = 0; i < byteString.length; i++) { 
     ia[i] = byteString.charCodeAt(i); 
    } 
    var blob = new Blob([ab], {type: 'image/png'}); //or mimeString if you want 
    return blob; 
}