javascript - CropperJS getCroppedCanvas() 在第二次初始化时返回 null

Question

该方法在就绪事件中被调用。在第一次通话时它起作用了。当模式关闭时，我正在销毁裁剪器 - cropper.destroy() 。第二次打开模式后，裁剪器再次初始化，但这次 cropper.getCroppedCanvas() 返回 null

let cropper = new Cropper(image, {
                dragMode: 'move',
                aspectRatio: ratio,
                restore: false,
                guides: false,
                center: false,
                highlight: false,
                cropBoxMovable: false,
                cropBoxResizable: false,
                toggleDragModeOnDblclick: false,
                ready: function () {

                    modal.find(".save").on("click", function () {
                        console.log(cropper.getCroppedCanvas())
                        cropper.getCroppedCanvas().toBlob(function (blob) {
                            let formData = new FormData()
                            formData.append("croppedImage", blob)

                            jQuery.ajax({
                                method: "post",
                                url: "index.php?option=com_image_slideshows&task=slideshow.saveCroppedImage",
                                data: formData,
                                processData: false,
                                contentType: false
                            })
                            .done(function (response) {
                                modal.modal("hide")
                            })
                        })
                    })

                    cropper.crop()
                }
            })

在模态关闭时会发生这种情况:

modal.on("hidden.bs.modal", function () {
                cropper.destroy()
                jQuery("#cropper-modal .modal-body").html(
                    jQuery("<img>", {
                        id: "image",
                        "class": "cropper-hidden"
                    })
                )

            })

Answer 1

我的猜测是您最初设置的 cropper 变量:

let cropper = new Cropper(...)

第二次仍然在您的 ready 函数中被引用。我会首先尝试确保在调用 cropper.destroy() 后将 cropper 变量设置为 null。

您也可以尝试通过访问 this.cropper 在准备好的函数中访问正确的 Cropper 实例，例如:

ready: function () {
  modal.find(".save").on("click", function () {
    console.log(this.cropper.getCroppedCanvas());
  }
}