cropper is being destroyed on "cancel" button click, if I upload another image then the second time when "cancel" button is pressed the DOM cropper element is not being deleted and variables are still present, if I manually delete DOM cropper element I can see cropping UI for all images I keep uploading but as soon as I try to actually crop, for example, the third uploaded image I get this error:
Here is my js/Jquery code for handling cropper
const image_input = document.querySelector("#heads-img-input");
image_input.addEventListener("change", function() {
document.getElementById("overlay").style.display = "block";
const reader = new FileReader();
reader.addEventListener("load", () => {
const uploaded_image = reader.result;
document.querySelector("#crop-image").setAttribute("src", `${uploaded_image}`);
const image = document.getElementById('crop-image');
const cropper = new Cropper(image, {
aspectRatio: 1 / 1,
viewMode: 2,
movable: false,
zoomable: false,
zoomOnTouch: false,
cropBoxResizable: false,
toggleDragModeOnDblclick: false,
scalable: false,
rotatable: false,
guides: false,
background: false,
data:{ //define cropbox size
width: 400,
height: 400,
}
})
$result = jQuery('#result');
jQuery('#crop-btn').click(function() {
// Get a string base 64 data url
var croppedImageDataURL = cropper.getCroppedCanvas().toDataURL("image/png");
$result.append( jQuery('<img>').attr('src', croppedImageDataURL) );
});
jQuery('#cancel-btn').click(function() {
cropper.destroy();
document.querySelector("#crop-image").removeAttribute("src");
document.getElementById("overlay").style.display = "none";
});
});
reader.readAsDataURL(this.files[0]);
});
});