裁剪一个图像和上传与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(); 
           });