cropper se destruye al hacer clic en el botón "cancelar", si subo otra imagen, la segunda vez que se presiona el botón "cancelar" el elemento DOM cropper no se elimina y las variables aún están presentes, si elimino manualmente el elemento DOM cropper puedo veo la interfaz de usuario de recorte para todas las imágenes que sigo cargando, pero tan pronto como trato de recortar, por ejemplo, la tercera imagen cargada, aparece este error:

Mensaje de error

Causa del error

Aquí está mi código js/Jquery para manejar 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]); });

});