CropperJS getCroppedCanvas() returns null on second initialization

Question

The method is called in the ready event. On the first call it works. When the modal is closed, I am destroying the cropper - cropper.destroy() . After opening the modal second time, the cropper is initialized again but this time cropper.getCroppedCanvas() returns 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()
                }
            })

On modal closing this happens:

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

            })

Answer 1

My guess would be that the cropper variable you set initially:

let cropper = new Cropper(...)

is still being referenced in your ready function the second time around. I would first try ensuring that the cropper variable is set to null after cropper.destroy() is called.

You could also try accessing the correct Cropper instance in your ready function by accessing this.cropper, for example:

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

Answer 2

Besides calling destroy() method you also need to reinitialize the event listeners.

I think that event listeners still hold a reference to the old cropper so you need to unbind() them first and create them again on every ready() function call. I also suggest using this pointer instead of variable cropper to ensure you access the current instance.

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