Tenho uma função jquery responsável por cortar uma foto quando ocorre um upload de foto:
document.addEventListener('DOMContentLoaded', function() {
function readImage() {
if (this.files && this.files[0]) {
var file = new FileReader();
file.onload = function(e) {
document.getElementById("preview").src = e.target.result;
};
file.readAsDataURL(this.files[0]);
}
}
document.getElementById("file").addEventListener("change", readImage, false);
var x = document.getElementById("myDIV");
$("[type=file]").on("change", function() {
var file = this.files[0];
var formdata = new FormData();
formdata.append("file", file);
if (file.name.length >= 30) {
$('#name span').empty().append(file.name.substr(0, 30) + '..');
} else {
$('#name span').empty().append(file.name);
}
if (file.size >= 204800) {
$('#preview').hide();
$('#imgpadrao').show();
} else {
$('#imgpadrao').hide();
$('#preview').show();
$('.img-result').removeClass('hide');
}
var ext = $('#file').val().split('.').pop().toLowerCase();
if ($.inArray(ext, ['png', 'jpg', 'gif', 'bmp']) == -1) {
$('#info').hide();
$('#size').hide();
$('#labelfile').text('Escolha uma foto');
$('#file').val('');
$('#preview').hide();
alert('Essa extensão de foto não é permitida!');
}
});
//funcao crop:
var cropper = '';
$("#file").change(function(e) {
if (e.target.files.length) {
var file = this.files[0];
if (file.size >= 204800) {
$('.result').addClass('hide');
$('#botaocortar').addClass('hide');
alert('Esta imagem excedeu o tamanho máximo permitido (200kb)');
} else {
var reader = new FileReader();
reader.onload = function(e) {
var img = document.createElement("img");
img.id = 'image';
img.height = '300'
img.src = e.target.result;
$('.result').html('');
$('.result').removeClass('hide');
$('.result').append(img);
$('#botaocortar').removeClass('hide');
$('.options').removeClass('hide');
cropper = new Cropper(img);
};
reader.readAsDataURL(e.target.files[0]);
}
}
})
$('#botaocortar').click(function(e) {
e.preventDefault();
var imgSrc = cropper.getCroppedCanvas({
width: $('.img-w').val()
}).toDataURL();
$('.cropped').removeClass('hide');
$('.img-result').removeClass('hide');
$('.cropped').attr('src', imgSrc);
$('.download').removeClass('hide');
$('.download').attr('download', 'imagename.png');
$('.download').attr('href', imgSrc);
})
});
O problema ocorre que quando troco de rota e depois volto pra página onde o script deveria ser executado, a função não é executada, só é executada depois que dou refresh na página. Alguém tem alguma ideia do que pode estar acontecendo?
DOMContentLoaded
?$().ready(function () {
no lugar dedocument.addEventListener('DOMContentLoaded', function() {
?