裁剪一個圖像和上傳與jQuery文件上傳

Question

我使用jQuery文件上傳con上傳處理器，這︰ https://github.com/blueimp/jQuery-File-Upload/blob/master/server/php/UploadHandler.php 我上傳很好的圖像與fileupload，但現在我需要修改它們，然後再上傳。我使用croppie.js： http://foliotek.github.io/Croppie/ 我修改以這種方式「fileuploadadd」的方法：

.bind('fileuploadadd', function (e, data) { 
    $(e.target).fileupload('option', 'url', uploads_base_url + '?f=' + $(e.target).attr('folder')); 
       var acceptFileTypes = /(\.|\/)(gif|jpe?g|png)$/i; 
       if ($(e.target).attr('data-accept_file_types') != '' && '' + $(e.target).attr('data-accept_file_types') != 'undefined') 
        acceptFileTypes = new RegExp($(e.target).attr('data-accept_file_types'), 'i'); 
       if (data.originalFiles[0]['name']) { 
        var fileExt = '.' + data.originalFiles[0]['name'].split('.').pop(); 
        if (!acceptFileTypes.test(fileExt)) { 
         alert('Formato non ammesso'); 
         return false; 
        } else { 
         data.context = $("<div id='cropper'></div>").croppie({ 
          viewport: { 
           width: 300, 
           height: 300, 
           type: 'circle' 
          } 
         }) 
           .insertAfter("#dragArea"); 
         var reader = new FileReader(); 
         reader.readAsDataURL(data.files[0]); 
         reader.onload = function (e) { 
          data.context.croppie('bind', { 
           url: e.target.result 
          }); 
         }; 
         $("<div><button>Taglia</button></div>").insertAfter("#cropper") 
           .click(function() { 
            $("#cropper").croppie('result', {format: 'jpeg'}).then(function (resp) { 
             var blob = new Blob([window.atob(resp.split(",")[1])],{type:"image/jpeg"}); 
             data.files[0] = new File([blob], data.originalFiles[0]['name'].split(".")[0]+".jpeg"); 
             data.originalFiles[0] = data.files[0]; 
             data.submit(); 
             $("#cropper").remove(); 
             $(this).remove(); 
            }); 
           }); 
        } 
       } 
       //fixFileuploadValue(e.target, data.files[0].name); 
      }); 

點擊切換按鈕，將文件上傳，但它是在比文件上傳不同的編碼方式文件。我怎樣才能以相同的方式下載圖像裁剪？

Answer 1

您不需要創建新的blob文件。只需添加類型選項是：blob。像這樣：

$("#cropper").croppie('result', {format: 'jpeg', type: 'blob'}).then(function (resp) {           
            data.files[0] = new File([resp], data.originalFiles[0]['name'].split(".")[0]+".jpeg"); 
            data.originalFiles[0] = data.files[0]; 
            data.submit(); 
            $("#cropper").remove(); 
            $(this).remove(); 
           });