Javascript CropperJS getCroppedCanvas（）在第二次初始化时返回null

在就绪事件中调用该方法。第一次打电话就行了。当模式关闭时，我正在销毁裁剪器-

croper.destroy（）

。第二次打开模式后，裁剪器将再次初始化，但这次

crapper.getcrappedcanvas（）

返回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"
                    })
                )

            })

modal.on（“hidden.bs.modal”），函数（）{
crapper.destroy（）
jQuery（“#crapper modal.modal body”）.html(
jQuery（“”{
id:“图像”，
“类”：“隐藏的裁剪器”
})
)
})

我猜您最初设置的裁剪器变量是：

让裁剪器=新裁剪器（…）

第二次仍然在ready函数中引用。我将首先尝试确保在调用croper.destroy（）之后将croper变量设置为null

您还可以通过访问

this.crapper

，尝试在就绪函数中访问正确的裁剪器实例，例如：

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

---

在销毁函数中，是否也删除.on事件

modal.find(".save").off(); 

在裁剪器之后。销毁（）；你确认它真的被摧毁了吗？ 销毁后，可能在变量裁剪器中设置的太空或太未定义

---

所以我的2美分，到目前为止看起来都是正确的。

除了调用

destroy（）

方法之外，还需要重新初始化事件侦听器

我认为事件侦听器仍然保留对旧裁剪器的引用，因此您需要首先

unbind（）

它们，然后在每次

ready（）

函数调用时再次创建它们。我还建议使用

这个

指针而不是变量裁剪器来确保访问当前实例

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

---

@jmfolds是正确的，请务必参考

this.crapper

然而，这还不够。您必须验证裁剪器是否已准备好进行第二次裁剪实例，即使该函数是在裁剪器的“就绪”事件中定义的，并且假设第一次裁剪器已销毁。 您可以使用if语句轻松地执行此操作：

if (this.cropper.ready === true) {
    // Your code as is
} else {
    return
}

---

这解决了我在实施时遇到的问题。

您好。它被彻底摧毁了。但是

this.crapper

返回

未定义的
。请尝试访问您的crapper变量，但确保在销毁后将其设置为
crapper=null
。我还需要更多的信息来帮助解决这个问题，一个有效的例子会很有帮助。