jquery - 使用 HTML 选择图像时，裁剪功能起作用并在复制后预览。有没有办法可以在预览之前调用裁剪功能

Question

在调用图像后使用 Croppie.js，此代码会弹出一个裁剪模式并在允许我预览之前要求裁剪是否有一种方法可以在裁剪图像之前先预览图像

我想在选择和预览图像后将裁剪功能作为按钮触发。

var $uploadCrop, tempFilename, rawImg, imageId;

function readFile(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function (e) {
      $(".upload-demo").addClass("ready");
      $("#cropImagePop").modal("show");
      rawImg = e.target.result;
    };
    reader.readAsDataURL(input.files[0]);
  } else {
    swal("Sorry - you're browser doesn't support the FileReader API");
  }
}

$uploadCrop = $("#upload-demo").croppie({
  viewport: {
    width: 265,
    height: 265
  },
  enforceBoundary: false,
  enableExif: true
});

$("#cropImagePop").on("shown.bs.modal", function () {
  // alert('Shown pop');
  $uploadCrop
    .croppie("bind", {
      url: rawImg
    })
    .then(function () {
      console.log("jQuery bind complete");
    });
});

$(".item-img").on("change", function () {
  imageId = $(this).data("id");
  tempFilename = $(this).val();
  $("#cancelCropBtn").data("id", imageId);
  readFile(this);
});

$("#cropImageBtn").on("click", function (ev) {
  $uploadCrop
    .croppie("result", {
      type: "base64",
      format: "jpeg",
      size: { width: 265, height: 265 }
    })
    .then(function (resp) {
      $("#item-img-output").attr("src", resp);
      $("#cropImagePop").modal("hide");
    });
});

标签： jquerycropcroppie