Em poucos minutos procurando uma maneira de como mostrar o preview de uma imagem antes do upload da mesma, encontrei a magnifica solução:
$("##ID DO INPUT FILE##").change(function (event) {
var reader = new FileReader();
$(reader).load(function (event) {
$("##ID DO ELEMENTO IMG##").attr("src", event.target.result);
});
reader.readAsDataURL(event.target.files[0]);
});
Porém, uso uma biblioteca imageresizing.net o qual queria usar umas das suas funcionalidades para que o preview seja exibido com crop e alinhado ao centro.
No meu caso estou usando o código abaixo e não obtive êxito pelo fato de que a saída da imagem é uma base64
function readfile(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#image_preview').attr('src', e.target.result);
};
reader.readAsDataURL(input.files[0] + "?w=340&h=260&mod=crop&format=png");
}
}
$("#upload").change(function() {
readfile(this);
});
Há alguma outra forma de mostrar o preview onde eu possa usufruir do imageresizing?