Question

在上传之前使用裁纸器https://github.com/fengyuanchen/jquery-cropper裁剪图像。

选择图像时初始化裁剪器的代码：

var $image = $("#previewImage");
$("#category_photo").on("change", function () {
    var reader = new FileReader();
    reader.readAsDataURL(this.files[0]);

    reader.onload = function (e) {
      // Destroy the old cropper instance
      $image.cropper("destroy");

      // Replace url
      $image.attr("src", this.result);

      // Start cropper
      $image.cropper({
        aspectRatio: 1,
        movable: false,
        zoomable: false,
        rotatable: false,
        scalable: false,
        minCropBoxWidth: 400,
        minCropBoxHeight: 400,
        crop: function (event) {
          $("#photo_x").val(event.x);
          $("#photo_y").val(event.y);
          $("#photo_width").val(event.width);
          $("#photo_height").val(event.height);
        //   console.log("x", event.x);
        //   console.log("y", event.y);
        //   console.log("width", event.width);
        //   console.log("height", event.height);
        },
      });
    };
  });

我将作物值存储为要提交的表单中的隐藏输入字段。在提交时，我正在使用此php类https://www.verot.net/php_class_upload.htm处理上传。但是我无法弄清楚如何根据我所做的选择正确裁剪图像。

我尝试过：

$file->image_resize = true;
$file->image_x = ceil($image_details['width']);
$file->image_y = ceil($image_details['height']);

这：

$file->image_resize = true;
$file->image_crop = '$x $width $y $height' // values for top, right, bottom and left

两者都给我错误的结果

无法正确裁剪图像

0 个答案: