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

Posted 2023-05-09

【中文标题】通过 Ajax 将裁剪的图像数据发送到 PHP

【英文标题】：Sending cropped image data through Ajax to PHP

【发布时间】：2016-11-22 23:26:05

【问题描述】：

我有一个包含两个输入 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 发送裁剪后的图像而不是原始图像？

【问题讨论】：

有几个名为“cropbox”的项目。您可能应该提供指向您正在使用的链接的链接，并可能阅读相关文档。

@jcaron 我正在使用这个github.com/acornejo/jquery-cropbox

【参考方案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

【讨论】：

Blob 是否适用于某些浏览器或所有 html5 浏览器？

Blob 在所有现代浏览器以及 IE 版本 10 或更高版本中均受支持。关于 CropBox 插件中的 getBlob 方法 - 它也可以在所有现代浏览器中实现（正确的做法是 - 使用 canvas.toBlob，但它需要一些浏览器的 polyfill - 我使用过 github.com/blueimp/javascript-Canvas-to-Blob。关于 CropBox - 看起来他们使用与提到的 polyfill 相同的方法 - 所以它应该适用于所有现代浏览器）。