使用 Cropper.js 手动裁剪后直接将图像上传到 S3

Question

这是我的第一篇文章，所以要温柔！我是 Rails 初学者，对 JavaScript/JQuery 毫无头绪...

我有一个 Rails 项目，它要求用户能够选择一个文件并显示一个预览图像，然后他们可以在异步上传裁剪后的图像之前随意裁剪。

我已经使用JQuery FileUpload 插件（遵循this 教程）成功实现了直接上传到S3，并且我能够向用户展示他们可以使用Cropper.js 裁剪的预览图像。但是，我在上传裁剪图像的最后一步需要帮助。

这是我目前用于处理图像裁剪/上传到 S3 的 JS：

$(document).ready(function() {
  $('.directUpload').find("input:file").each(function(i, elem) {
    var fileInput    = $(elem);
    var form         = $(fileInput.parents('form:first'));
    var submitButton = form.find('input[type="submit"]');
    var progressBar  = $("<div class='bar'></div>");
    var barContainer = $("<div class='progress'></div>").append(progressBar);
    fileInput.after(barContainer);

    fileInput.fileupload({
      fileInput:        fileInput,
      url:              form.data('url'), //read AWS config via form attributes
      type:             'POST',
      autoUpload:       false, // prevent upload start on file selection
      formData:         form.data('form-data'), 
      paramName:        'file', 
      dataType:         'XML',  
      replaceFileInput: false,

上面的代码初始化了 JQuery FileUpload 并传递了我的 S3 配置数据。

接下来，我使用 JQuery FileUpload 的“add”回调来显示预览图像/裁剪框，并在用户单击“上传”按钮时将图像上传到 S3：

add: function (e, data) {
  if (data.files && data.files[0]) {
    var reader = new FileReader();
    reader.onload = function(e) {
      $('#preview_image').attr('src', e.target.result); // insert preview image
      $('#preview_image').cropper() // initialize cropper on preview image
     };
   reader.readAsDataURL(data.files[0]); 
  };

  $('#upload_image').on('click', function(){
    $('#preview_image').cropper('getCroppedCanvas').toBlob(function (blob){
      var croppedFile = new File([blob], 'cropped_file.png')
      // How do I now get my cropped file data to upload instead of original file?
    })
    data.submit();
  });
},

这是上面的最后一部分，我现在卡住了 - 我从裁剪区域创建了一个文件，但找不到上传它而不是原始图像的方法。

其余代码主要处理显示上传进度和构建一个图像 URL，我可以将其保存到我的数据库中以进行图像检索。

progressall: function (e, data) {
    var progress = parseInt(data.loaded / data.total * 100, 10);
    progressBar.css('width', progress + '%')
  },

  start: function (e) {
    submitButton.prop('disabled', true); //disable submit button while image is loading

    progressBar.
      css('background', 'green').
      css('display', 'block').
      css('width', '0%').
      text("Loading...");
  },

  done: function(e, data) {
    submitButton.prop('disabled', false);
    progressBar.text("Uploading done");

    // extract key from S3 XML response and generate URL for image
    var key   = $(data.jqXHR.responseXML).find("Key").text();
    var url   = '//' + form.data('host') + '/' + key;

    // create hidden field containing image URL, which can then be stored in model
    var input = $("<input />", { type:'hidden', name: 'image_url[]', value: url })
    form.append(input);
  },

  fail: function(e, data) {
    submitButton.prop('disabled', false);

    progressBar.
      css("background", "red").
      text("Failed");
  }
});

Answer 1

这对我有用

var croppedFile = new File([blob], 'cropped_file.png');    
data.files[0] = croppedFile;
data.originalFiles[0] = data.files[0];

或者只是

data.files[0] = new File([blob], 'cropped_file.png');
data.originalFiles[0] = data.files[0];

然后

data.submit()