Hide selection screen in Cropper.js

Question

I have developed a screen where I make a Crop of an image and I am using the Cropper.js library.

Everything works well, but I need it to hide the image where the selection was made and stay only the image with the result of Crop.

I’ve tried this with Javascript command but it’s not working.

Someone can help out??

Follows my code :

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

I created an example in this codepen (https://codepen.io/egameiro/pen/orZGBM) that you can see what’s happening.

Thank you.

Answer 1

You need to hide the div where the element is <img id="crop"/>. For this change the following line in the function of the $('.salvar').click:

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

For:

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

Will fetch the id #crop and hide the father div.

If you are no longer using the element, remove it by swapping .hide() for .remove():

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