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

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>

和控制器.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​​轉換為文件？ 謝謝。

Answer 1

看看這個鏈接。

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 ）

Answer 2

請嘗試以下操作：

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

Answer 3

 $scope.uploadFileCropper = function () {
        debugger;
        var imageBase64 = $(".cropped")[0].src;
        var blob = this.dataURItoBlob(imageBase64);
        var blobimage = new File([blob], 'image.png');
        if (blobimage != "") {
            var file = blobimage;
            var payload = new FormData();
            payload.append("file", file);
            //data.my_imageurl = $(".cropped")[0].src;
            uploadSUFileService.uploadFile('your API Route', payload).then(function (response) {
                $(".MKloader").fadeOut("slow");
                if (response.status == 200) {
                    $scope.ProductLines.my_imageurl = response.data;
                    document.getElementById('image').src = $scope.ProductLines.my_imageurl;
                    $scope.updatedataimageURl();
                } else if (response.status == 203) {
                    console.log(status);
                    location.replace("/Signin");
                } else if (response.status == 204) {
                    console.log(status);
                    alert("Record not updated")
                }
            }).catch(function (response) {

                console.log(response);
                $(".MKloader").fadeOut("slow");
            });
        }
    }

 $scope.dataURItoBlob = function (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;
    }

Answer 4

你添加了這個：

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