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

335
Visualizações
How to avoid the magnifying zoom my cropbox has in Cropper js?

Im using Cropper JS by fengyuanchen. When my cropper loads everything looks ok. But when I resize the window the cropbox zooms in the image.

This is how it loads:

enter image description here

And this is how it ends after the window resizing:

enter image description here

The is a zoom effect in the cropbox that I don't want. I'd like to be able to resize the window and avoid the zoom effect in the cropbox. Below are my cropper and container specifications:

Cropper:

croper() {
                const image = document.getElementById('image');
                const cropper = new Cropper(image, {
                    responsive:false,
                    autoCropArea:1,
                    zoomable:false,
                    movable: false,
                    aspectRatio: NaN, viewMode: 2, crop(event) {
                        console.log("***********************************");
                        console.log(event.detail.x);
                        console.log(event.detail.y);
                        console.log(event.detail.width);
                        console.log(event.detail.height);
                        console.log(event.detail.rotate);
                        console.log(event.detail.scaleX);
                        console.log(event.detail.scaleY);
                        this.data = this.cropper.getData();
                        document.getElementById("demo").innerHTML = JSON.stringify(this.data);
                        var contData = cropper.getContainerData(); //Get container data
                    },
                });
                cropper.setCropBoxData({ height: contData.height, width: contData.width  }) //set data
            }

Container:

<div class="col-md-8 col-sm-6 grid-margin stretch-card"  id="image_box" align="center">
            <div class="card text-center" style=" overflow: hidden; height: 100vh;">
                <!-- <div class="card-body"> -->
                <!-- <label id="file-drag"> -->
                <img id="image" style="max-width: 100%; display: block; " src="static/template/{{img}}.png" alt="Preview">
                <span id="preview">La vista previa de la imagen de la plantilla irá aquí</span>
                <!-- </label> -->
                <!-- </div> -->
            </div>
        </div>

Thanks!

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