4

该方法在就绪事件中被调用。在第一次通话时它工作。当模态关闭时，我正在破坏裁剪器 - cropper.destroy()。第二次打开modal后，cropper再次初始化，但这次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"
                    })
                )

            })
4

4 回答 4

6

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

let cropper = new Cropper(...)

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

您还可以通过访问来尝试在您的就绪函数中访问正确的 Cropper 实例this.cropper，例如：

ready: function () {
  modal.find(".save").on("click", function () {
    console.log(this.cropper.getCroppedCanvas());
  }
}
于 2019-12-04T23:54:15.563 回答
1

@jmfolds 是正确的，重要的是您参考this.cropper.

然而，这还不够。您必须验证裁剪器是否已为第二个裁剪实例做好准备，即使该函数在裁剪器的“就绪”事件中定义并假设第一个裁剪器已被销毁。您可以使用 if 语句轻松做到这一点：

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

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

于 2020-07-16T13:31:45.873 回答
0

除了调用destroy()方法之外，您还需要重新初始化事件侦听器。

我认为事件侦听器仍然持有对旧裁剪器的引用，因此您首先需要它们并在每次函数调用unbind()时再次创建它们。ready()我还建议使用this指针而不是变量裁剪器来确保您访问当前实例。

ready: function () {
  var that = this;
  modal.find(".save").unbind('click');
  modal.find(".save").on("click", function () {
    console.log(that.cropper.getCroppedCanvas());
  }
}
于 2020-06-24T12:03:40.323 回答
0

在您的销毁功能中，您是否也删除了 .on 事件？ 

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

在cropper.destroy()之后；你确认它真的被摧毁了吗？可能在销毁后在变量cropper中设置得太空或未定义。

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

于 2019-12-09T19:41:17.193 回答