在Bootstrap嵌套模态框中Cropper.js第二次调用返回null原因排查

我需要实现以下功能：

• 点击按钮弹出带有提交表单的firstModal；
• 表单内的文件上传有两个选项：普通文件上传、截图粘贴上传；
• 选择截图粘贴选项后，捕获Ctrl+V粘贴的剪贴板图片，弹出secondModal并初始化Cropper供用户裁剪；
• 用户点击裁剪按钮后，将裁剪后的图片转入文件输入框并显示预览。

首次操作正常，但关闭模态框重复操作时，getCroppedCanvas()返回null，请问原因是什么？

核心问题是重复绑定事件监听器：
每次触发粘贴事件时，你都会给#secondModal的shown.bs.modal、hidden.bs.modal事件，以及#crop按钮的click事件绑定新的处理函数。第二次及后续粘贴时，这些事件会触发多次：

1. 关闭secondModal时，hidden.bs.modal的多个处理函数依次执行，提前销毁了cropper实例；
2. 点击裁剪按钮时，旧的click处理函数被触发，此时对应的cropper已经被销毁，导致getCroppedCanvas()返回null。
   另外，cropper变量声明在paste事件内部，多次绑定后，后续事件访问的是已失效的实例引用。

将模态框和裁剪按钮的事件绑定移到粘贴事件外部，避免重复绑定；同时确保cropper实例的作用域能被正确访问。修改后的代码如下：

修改后的JS代码 #

function checkFileUpload() {
  var is_file = $("#isFile").is(":checked");
  var is_ss = $("#isSS").is(":checked");
  if (is_ss) {
    $("#inputSS").prop("disabled", false);
    $("#inputFile").prop("disabled", true);
  } else {
    $("#inputFile").prop("disabled", false);
    $("#inputSS").prop("disabled", true);
    document.getElementById("cropped-image").style.display = "none";
  }
}
checkFileUpload();
$(document).on("click", "#isFile,#isSS", function(e) {
  checkFileUpload();
});

const inputSS = document.getElementById("inputSS");
const $modal = $("#secondModal");
const image = document.querySelector("#cropper-image");
let cropper; // 提升作用域，让所有事件处理函数共享实例引用

// 仅绑定一次模态框事件
$modal.on("shown.bs.modal", function() {
  cropper = new Cropper(image, {
    viewMode: 3,
  });
}).on("hidden.bs.modal", function() {
  if (cropper) {
    cropper.destroy();
    cropper = null;
  }
});

// 仅绑定一次裁剪按钮点击事件
$("#crop").on("click", function() {
  if (cropper) {
    const canvas = cropper.getCroppedCanvas({
      width: 400,
      height: 400,
    });
    const resultImage = document.getElementById("cropped-image");
    resultImage.src = canvas.toDataURL();
    resultImage.style.display = "block";
    canvas.toBlob(blob => {
      const croppedFile = new File([blob], "croppedScreenShot.png");
      const dT = new DataTransfer();
      dT.items.add(croppedFile);
      inputSS.files = dT.files;
    });
  }
  $modal.modal("hide");
});

// 粘贴事件仅负责加载图片和打开模态框
$(document).on("paste", function(e) {
  const clipboardData = e.clipboardData || window.clipboardData || e.originalEvent.clipboardData;
  if ($("#isSS").is(":checked")) {
    inputSS.files = clipboardData.files;
    const files = inputSS.files;
    if (files && files.length > 0) {
      const file = files[0];
      let url;
      if (URL) {
        url = URL.createObjectURL(file);
      } else if (FileReader) {
        const reader = new FileReader();
        reader.onload = function(e) {
          image.src = reader.result;
          $modal.modal("show");
        };
        reader.readAsDataURL(file);
        return;
      }
      inputSS.value = "";
      image.src = url;
      $modal.modal("show");
    }
  }
});

$("#firstModal").on("hidden.bs.modal", function() {
  document.getElementById("submitForm").reset();
});

关键修改点 #

1. 提升cropper变量作用域：将cropper变量声明在事件处理外部，让所有相关事件处理函数共享同一个实例引用；
2. 事件仅绑定一次：把模态框和裁剪按钮的事件逻辑移到粘贴事件外部，只初始化一次，避免重复绑定导致的多次触发；
3. 简化粘贴事件逻辑：粘贴事件只负责读取剪贴板图片、设置图片源并打开模态框，不再处理事件绑定逻辑。

内容的提问来源于stack exchange，提问作者DrWalt Bishop