1

Desenvolvi uma tela onde eu faço um crop de uma imagem e estou utilizando a biblioteca Cropper.js.

Tudo funciona bem, mas eu preciso que ele esconda a imagem onde foi feita a seleção e fique somente a imagem com o resultado do Crop.

Já tentei fazer isso com comando JavaScript mas não está funcionando.

Alguém pode dar uma ajuda??

Segue meu código :

var recorte = $('.img-container > img');
recorte.cropper({
  movable: false,
  zoomable: false,
  rotatable: false,
  scalable: false
});

function previewFile() {
  var file    = document.querySelector('input[type=file]').files[0];
  var reader  = new FileReader();
  
  reader.onloadend = function () {
   $('img').show(); 
   recorte.cropper('replace',reader.result);
  }
  if (file) {
    reader.readAsDataURL(file);
  } else {
   recorte.cropper('replace','');
  }
}

$('.salvar').click(function(){
  foto.src=recorte.cropper('getCroppedCanvas').toDataURL();
  document.getElementById("crop").style.display = "none";
  
  //window.location.href = recorte.cropper('getCroppedCanvas').toDataURL();	
});

Eu criei um exemplo nesse codepen (https://codepen.io/egameiro/pen/orZGBM) que dá pra ver o que está acontecendo.

Obrigado.inserir a descrição da imagem aqui

2
  • Em que momento vc quer esconder o que não foi selecionado/recortado?
    – Meu ovo
    21/06/2019 às 18:34
  • Quando clicar no botão para criar o Crop..
    – Eduardo
    21/06/2019 às 18:56

1 Resposta 1

2

Você precisa esconder a div onde está o elemento <img id="crop"/>. Para isso troque a seguinte linha na função do $('.salvar').click:

document.getElementById("crop").style.display = "none";

Por:

$("#crop").parent().hide();

Irá buscar a id #crop e esconder a div pai.

Se não for mais usar o elemento, remova-o trocando .hide() por .remove():

$("#crop").parent().remove();
1
  • Perfeito.... Sam.. Obrigado...
    – Eduardo
    21/06/2019 às 19:17

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .