javascript - Ajax 将图像裁剪为 PHP

Question

我正在尝试创建一个 jQuery 图像裁剪器。用户将上传图像，然后将显示他们想要裁剪的位置的图像预览。裁剪尺寸应恰好为 600 x 400。因此，如果用户尝试上传 2000 像素宽 x 2000 像素高的图像，那么他们将只能获得该图像的 600 x 400 选择。用户选择了该图像的裁剪后，他们就可以上传它。裁剪后的图像应该在 Ajax 中转发并发送到 PHP，但如何为其创建 Ajax？如何通过 Ajax 将裁剪后的坐标和图像尺寸发送到 PHP？那么 PHP 应该是什么样子呢？这个插件(cropbox)可以获取图像的src，但由于某种原因它不适用于输入类型="file"。这是jsfiddle ，这是我尝试过的:

HTML

<input type="file" id="cropimage">

jQuery

$(function() {
  var file = $("#cropimage").files[0];
  if (file.type.match(/image\/.*/)) {
    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) {

      })

    })
  }
})

Answer 1

• 通过file-input附加change监听器
• 设置reader.readAsDataURL(file);
• 在 DOM 中附加 $img

$(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) {});
      });
      $('body').append($img);
    };
    reader.readAsDataURL(file);
  });
});

<小时/>

Fiddle Demo