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.