Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

199
Vistas
Cropper can't be destroyed twice or more

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:

Error message

Error cause

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

});

about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda