通过 Ajax 将裁剪的图像数据发送到 PHP

Question

我有一个包含两个输入 type="file" 字段和一个提交按钮的表单。其中一个文件字段将被用户裁剪，另一个则不会。我使用的裁剪插件是cropbox。我已经设置了基本的用户界面，但我不明白如何通过 Ajax 将带有裁剪图像和未裁剪图像的表单数据发送到 PHP。这是我目前所拥有的jsfiddle。

HTML

<form class="image_form" action="" method="post" enctype="multipart/form-data">
  <input type="file" id="cropimage">
  <input type="file">
  <input type="submit" value="submit">
</form>

jQuery

$(function() {
  $("#cropimage").on('change', function() {
    var file = this.files[0];
    var reader = new FileReader();
    reader.onload = function() {
      var $img = $('<img />').attr({
        src: reader.result
      });
      $img.on('load', function() {
        $img.cropbox({
          width: 600,
          height: 400
        }).on('cropbox', function(event, results, img) {
          submission(JSON.stringify(results));
        });
      });
      $('body').append($img);
    };
    reader.readAsDataURL(file);
  });
});

function submission(get_data) {
  $(".image_form").submit(function(e) {
    e.preventDefault();

    console.log(get_data);

    $.ajax({
      type: 'POST',
      url: '',
      data: new FormData(this),
      processData: false,
      contentType: false,
      success: function(data) {

      }
    });
  });

}

一旦用户上传了一张图片，它会检查提交按钮是否被按下以通过 Ajax 发送。如何通过 Ajax 发送裁剪后的图像而不是原始图像？

Answer 1

使用FormData 时，您可以将调整大小的图像直接附加到Blob。

CropBox 插件有getBlob 方法，可用于获取带有裁剪图像的blob。您只需将 blob 附加到您的 formData：

formData.append('croppedFile', imageBlob)
// or if you want to add filename
formData.append('croppedFile', imageBlob, 'cropped.jpg')

https://developer.mozilla.org/en-US/docs/Web/API/FormData/append https://github.com/acornejo/jquery-cropbox#methods