Tengo un complemento cropper.js en mi proyecto, donde los usuarios pueden cargar una imagen de perfil.

Estoy planeando recortar la imagen y cargar la imagen base64Image recortada al servidor sobre la marcha sin recargar la página, luego actualizar una imagen de perfil de usuario con ajax.

funciona bien para la primera imagen de perfil que el usuario eligió recortar y enviar. Pero luego falla si un usuario elige otra imagen antes de que la página se vuelva a cargar.

Mi código para cargar una imagen en un modal cropper.

 const changeLoader = event => { let files = event.target.files; var don = (url) => { image.src = url; $modal.modal("show"); } if (files && files.length > 0) { reader = new FileReader(); reader.onload = (event) => { don(reader.result); }; reader.readAsDataURL(files[0]); // CroperModal.modal("show"); } $modal.on('shown.bs.modal', function () { cropper = new Cropper(image, { aspectRatio: 1, viewMode: 1, preview: '.preview' }); }).on('hidden.bs.modal', function () { cropper.destroy(); cropper = null; });

la línea que causa la excepción

 $("#crop").click(function () { let canvas = cropper.getCroppedCanvas( //line 189 { width: 600, height: 600 } ); }

La excepción

 Uncaught TypeError: Cannot read properties of null (reading 'toBlob') at HTMLButtonElement.<anonymous> (index.js:189) at HTMLButtonElement.dispatch (jquery-3.6.0.min.js:2) at HTMLButtonElement.v.handle (jquery-3.6.0.min.js:2)