使用ngImgCrop角度文件上傳

我正在使用（ngImgCrop）裁剪圖像，然後使用（angular-file-upload）將裁剪圖像上傳到服務器。使用ngImgCrop角度文件上傳

我可以從ngImgCrop中的「on-change」選項中獲取$ dataURI。但是我需要一個File instace來調用$ upload。我怎樣才能裁剪圖像的文件實例，以便上傳：

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

來源

2014-09-22 rayashi

如何從數據URI創建File對象？ – rayashi 2014-09-22 20:25:08

嗨，哥們，我面臨同樣的問題。正如我在這裏解釋http://stackoverflow.com/questions/26360403/uploading-a-base64-encoded-image-to-node-js-server-not-working我得到裁剪圖像上傳，但我有一些麻煩在服務器端獲得可用的圖像。圖像似乎無法正常打開。你是否用角度文件上傳解決了你的問題？我也將它用於其他目的，但如果它能正常工作，我也可以使用它來上傳裁剪圖像。不管怎麼說，還是要謝謝你！ – 2014-10-15 23:22:20

不，我在服務器端做過裁剪。使用python Pillow。 – rayashi 2014-10-17 11:09:26

嘗試類似：

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裁剪圖像成團塊

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格式文件，另一種格式是裁剪後的圖像。

來源

2014-09-26 20:44:13

我想你會在這個方法中找到正確的答案。我發現它在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);

我不不知道它是否以好的方式工作，但似乎。

來源

2014-10-15 23:30:33

這真的對我很有用！ – charliebrownie 2016-09-15 14:52:22

使用ngImgCrop角度文件上傳

回答

相關問題