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

            })

score 6 · Answer 1 · answered Dec 04 '19 at 23:54

6

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());
  }
}

answered Dec 04 '19 at 23:54

jmfolds

1,055
8
9

Hi. It's properly destroyed. But `this.cropper` returns `undefined`. – Toma Tomov Dec 05 '19 at 00:01
Try accessing your cropper variable, but ensure you set `cropper = null` after you destroy it. I would need more info to help with this anymore though, a working example would be very helpful. – jmfolds Dec 12 '19 at 16:41

score 1 · Answer 2 · edited Jun 24 '20 at 17:14

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());
  }
}

score 1 · Answer 3 · answered Jul 16 '20 at 13:31

@jmfolds is correct, it is important that you reference this.cropper.

However, that is not enough. You have to verify that the cropper is ready for the second cropping instance even if the function is defined in the "ready" event of the cropper and assuming that the first cropper is destroyed. You can do that easily using an if statement:

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

This solved my problem when I was implementing it.

score 0 · Answer 4 · answered Dec 09 '19 at 19:41

In your destroy function do you remove the .on event too?

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

After the cropper.destroy(); did you validate that it is really destroyed? maybe set in the variable cropper too null or undefined too after destroy.

So my 2 cents, It looks all correct so far I see.

CropperJS getCroppedCanvas() returns null on second initialization

4 Answers4

Linked