Ein Bild zuschneiden und mit jQuery hochladen fileupload

Question

Ich benutze JQuery File Upload mit UploadHandler, dies: https://github.com/blueimp/jQuery-File-Upload/blob/master/server/php/UploadHandler.php Ich lade gut die Bilder mit Fileupload, aber jetzt muss ich sie vor dem Hochladen ändern. Ich verwende croppie.js: http://foliotek.github.io/Croppie/ Ich Modifikation ‚fileuploadadd‘ Methode auf diese Weise:

.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); 
      }); 

Klicken Sie auf Cut-Taste, wird die Datei hochgeladen, aber es ist in einer anderen Art und Weise codiert als Fileupload Datei. Wie kann ich das zugeschnittene Bild auf die gleiche Weise herunterladen?

Answer 1

Sie müssen keine neue BLOB-Datei erstellen. Nur hinzufügen Typ Option ist: Blob. Wie folgt:

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