Estoy tratando de recotar una imagen antes de subirla, para esto me apoyo en Cropperjs. El problema que me encuentro es que cuando seleccionas una imagen la primera carga sin problema, pero si por el motivo que sea vuelves a seleccionar otra imagen diferente, Cropper mantiene siempre la primera imagen que seleccionas en el input
dejo un ejemplo donde reproducir lo que sucede:
<!DOCTYPE html>
<html>
<head>
<title>ejemplo</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.5/cropper.css" integrity="sha256-x8iLuq/BLgVhgqscHiKrBZFP60kV2Xuilmpqy7kD/vI=" crossorigin="anonymous" />
</head>
<body>
<input type="file" id="inputImage" name="image" accept="image/*">
<div>
<img id="img">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.5/cropper.js" integrity="sha256-U/8sUxL62BDCJvl8Dmu1uuTtKilSrHytsP3XfgCJZwo=" crossorigin="anonymous"></script>
<script>
const inputImage = document.getElementById('inputImage');
const img = document.getElementById('img');
inputImage.addEventListener('change', function (e) {
let files = e.target.files;
img.src = URL.createObjectURL(files[0]);
new Cropper(img, {
aspectRatio: 4/3,
});
});
</script>
</body>
</html>