Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

188
Visualizações
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 à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda