загрузка углового файла с помощью ngImgCrop

Я использую (ngImgCrop), чтобы обрезать изображение, а затем загрузить обрезанное изображение на сервер, используя (angular-file-upload).

Я могу получить $dataURI из опции «при изменении» в ngImgCrop. Но мне нужен экземпляр файла для вызова $upload. Как я могу получить экземпляр файла обрезанного изображения для загрузки:

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

file-upload angularjs crop angular-file-upload
person rayashi    schedule 22.09.2014    source источник
comment
Как я могу создать объект File из URI данных?   -  person rayashi    schedule 23.09.2014
comment
Привет дружище, столкнулся с такой же проблемой. Как я объясню здесь stackoverflow.com/questions/26360403/ я загружаю обрезанное изображение, но у меня есть некоторые проблемы с получением пригодного для использования изображения на стороне сервера. Изображение не открывается должным образом. Вы решили свой вопрос с помощью angular-file-upload? Я использую его и для других целей, но если он работает, я мог бы использовать его и для загрузки обрезанного изображения. Спасибо, в любом случае!   -  person Rubén Jiménez    schedule 16.10.2014
comment
Нет, я сделал обрезку на стороне сервера. с помощью подушки Python.   -  person rayashi    schedule 17.10.2014
comment
Привет, ребята, я сделал это, проверьте мое обновление!   -  person pedrommuller    schedule 15.11.2014
comment
можете ли вы показать мне, как вы используете $files из onFileSelect из angular-file-upload в качестве атрибута изображения для img-crop   -  person Aakash    schedule 07.01.2016

Ответы (2)


arrow_upward
8
arrow_downward

Я думаю, вы найдете правильный ответ в этом методе. Я нашел его в Github, на странице проблем с загрузкой угловых файлов (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);

Не знаю, хорошо ли это работает, но похоже.

person Rubén Jiménez    schedule 15.10.2014

arrow_upward
3
arrow_downward

попробуйте что-то вроде:

 var uploader = $scope.uploader = new FileUploader({
        url: '/saveImagePath',
        autoUpload: false
    });

angular.element(document.querySelector('#fileInput')).on('change',handleFileSelect);

var handleFileSelect=function(evt) {
      var file=evt.currentTarget.files[0];
      var reader = new FileReader();
      reader.onload = function (evt) {
        $scope.$apply(function($scope){
          $scope.myImage=evt.target.result;
        });
      };
      reader.readAsDataURL(file);
    };

загрузчик не поддерживает изображения base64, поэтому вам нужно преобразовать обрезанное изображение из base64 в blob

function base64ToBlob(base64Data, contentType) {
        contentType = contentType || '';
        var sliceSize = 1024;
        var byteCharacters = atob(base64Data);
        var bytesLength = byteCharacters.length;
        var slicesCount = Math.ceil(bytesLength / sliceSize);
        var byteArrays = new Array(slicesCount);

        for (var sliceIndex = 0; sliceIndex < slicesCount; ++sliceIndex) {
            var begin = sliceIndex * sliceSize;
            var end = Math.min(begin + sliceSize, bytesLength);

            var bytes = new Array(end - begin);
            for (var offset = begin, i = 0 ; offset < end; ++i, ++offset) {
                bytes[i] = byteCharacters[offset].charCodeAt(0);
            }
            byteArrays[sliceIndex] = new Uint8Array(bytes);
        }
        return new Blob(byteArrays, { type: contentType });
    }

вам нужно вручную прикрепить файлы к очереди следующим образом:

$scope.submit = function () {
         var file = base64ToBlob($scope.currentPortfolio.croppedImage.replace('data:image/png;base64,',''), 'image/jpeg');
        uploader.addToQueue(file);
        uploader.uploadAll();

    };

на стороне сервера у вас есть два типа файлов: один публикуется как файл HTML, а другой — в формате un base64, представляющий собой обрезанное изображение.

person pedrommuller    schedule 26.09.2014