画像をトリミングしてjQueryファイルアップロードでアップロードする

Question

私はJQueryファイルアップロードを使用しています。UploadHandler、 https://github.com/blueimp/jQuery-File-Upload/blob/master/server/php/UploadHandler.php ファイルアップロードで画像をうまくアップロードできましたが、アップロードする前に変更する必要があります。私は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ファイルを作成する必要はありません。タイプのオプションを追加するだけです：ブロブ。このように：

$("#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(); 
           });