angularjs - 使用ngImgCrop上传 Angular 文件

Question

我正在使用(ngImgCrop)裁剪图像，然后使用(angular-file-upload)将裁剪后的图像上传到服务器。

我可以从ngImgCrop的“on-change”选项中获取$ dataURI。但是我需要一个文件实例来调用$ upload。
我如何获取裁剪后的图像的File实例以便上传:

        $scope.upload = $upload.upload({
            url: '/api/fileupload',
            file: [**file cropped here**]
        }).progress(function (evt) {
            //
        }).success(function (data, status, headers, config) {
            //
        });

Answer 1

我想您会在这种方法中找到正确的答案。我在Github的angular-file-upload问题页面(https://github.com/nervgh/angular-file-upload/issues/208)中找到了它:

/**
   * Converts data uri to Blob. Necessary for uploading.
   * @see
   *   http://stackoverflow.com/questions/4998908/convert-data-uri-to-file-then-append-to-formdata
   * @param  {String} dataURI
   * @return {Blob}
   */
  var dataURItoBlob = function(dataURI) {
    var binary = atob(dataURI.split(',')[1]);
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
    var array = [];
    for(var i = 0; i < binary.length; i++) {
      array.push(binary.charCodeAt(i));
    }
    return new Blob([new Uint8Array(array)], {type: mimeString});
  };

您应该能够使文件实例执行以下操作:

var blob = dataURItoBlob($scope.croppedImage);

我不知道它是否运作良好，但似乎。