CropperJS getCroppedCanvas () возвращает ноль при второй инициализации

Question

Метод вызывается в событии ready. На первом звонке это работает. Когда модал закрыт, я уничтожаю кроппер - cropper.destroy(). После открытия модального второго раза обрезка инициализируется снова, но на этот раз cropper.getCroppedCanvas() возвращает ноль

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

Я полагаю, что переменная обрезки, которую вы установили изначально:

let cropper = new Cropper(...)

все еще упоминается в вашей функции готовности во второй раз. Сначала я хотел бы убедиться, что переменная cropper установлена ​​в null после вызова cropper.destroy ().

Вы также можете попробовать получить доступ к правильному экземпляру Cropper в своей функции ready, например, this.cropper, например:

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

Answer 2

В своей функции уничтожения вы тоже удаляете событие .on?

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

После cropper.destroy ();Вы подтвердили, что это действительно разрушено? возможно, установите в переменной cropper слишком нулевое или неопределенное значение после уничтожения.

Итак, мои 2 цента, пока я вижу все правильно.