Question

我正在尝试创建一个jQuery图像裁剪器。用户将上传图像，并且将显示他们想要裁剪的图像预览。裁剪尺寸应该恰好是600 x 400.因此，如果用户尝试上传2000像素宽，2000像素高的图像，那么他们只能获得600 x 400的图像选择。在用户选择了该图像的裁剪后，他们就可以上传它。裁剪后的图像应该在Ajax中中继并发送给PHP，但是如何为它创建Ajax？如何通过Ajax将裁剪的坐标和图像尺寸发送到PHP？之后，PHP应该怎么样？这个插件（cropbox）用于获取src的图像，但由于某种原因它不能用于输入type =“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

将change听众与file-input
设置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);
  });
});

Ajax裁剪图像到PHP

1 个答案:

Fiddle Demo