在 AngularJS 中将 base64 转换为图像文件

Question

我正在使用 ngImgCrop 插件进行图像裁剪，post 用于我的休息服务。 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.
      });
    }

是的，它可以工作，但是图像 link return 是通过 base64 转换的，但是 API link 想通过文件转换。

我试图添加更改：

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

但它不起作用，图像文件 return 为空白。如何将 base64 url 转换为文件？谢谢。

Answer 1

尝试以下操作：

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

Answer 2

查看 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到服务器的例子，它与您所做的有点不同，但它确实有效。

在转换 base64 的开头，您只发送没有元数据的 base64，而不是发送图像的 href。您定义为 contentType:json 并将其发送到服务器。

在服务器端你得到 base64（它实际上是一个代表位数组的字符串）并将它转换为图像（php convert base64）

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

Answer 4

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

在 AngularJS 中将 base64 转换为图像文件

Convert base64 to image file in AngularJS

javascript

base64

input

angularjs