在AngularJS中將base64轉換爲圖像文件

我使用ngImgCrop插件進行圖像裁剪併發布到我的休息服務。 HTML是這樣的：在AngularJS中將base64轉換爲圖像文件

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

但其沒有工作，鏡像文件恢復到空白。如何將base64 url轉換爲文件？謝謝。

來源

2016-03-09 Karmacoma

退房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（巫婆它實際上代表位數組字符串），並將其轉換，而是圖像（php convert base64）

來源

2016-03-09 15:38:58 Zamboney

嘗試以下操作：

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

來源

2016-03-09 15:37:22 Camo

不，我需要圖像文件。 – Karmacoma

你加入這個：

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

來源

2018-01-07 03:32:03

在AngularJS中將base64轉換爲圖像文件

回答

相關問題