2

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?

3
  • Você conseguiu resolver o problema? Commented 5/04/2014 às 20:08
  • Acabei resolvendo o meu problema usando o plugin de upload do jasny.github.io/bootstrap/javascript/#fileinput foi o que mais se encaixou a minha necessidade. Commented 7/04/2014 às 13:30
  • Você poderia postar uma resposta? Assim, todos podem saber que esta questão não necessita mais de atenção, e além disso, quem precisar no futuro, pode usar a mesma solução. Commented 7/04/2014 às 13:39

2 Respostas 2

4

Você pode fazer isso usando o elemento canvas do HTML5.

function showThumbnail(files) {
    loadImage(files[0]);
    counter = 0;
    function loadImage( file ) {
        var canvas = document.createElement("canvas"),
            img = new Image();

        img.onload = function() {
            var w = img.width / 10, h = img.height / 10;
            canvas.width = w;
            canvas.height = h;
            var ctx = canvas.getContext("2d");
            ctx.drawImage(img, 0, 0, w, h);

            // configurações de crop
            var sourceX = img.width * 0.30,
                sourceY = img.height * 0.30,
                sourceWidth = img.width * 0.40,
                sourceHeight = img.height * 0.40;

            ctx.drawImage(img, sourceX, sourceY, sourceWidth, sourceHeight, 0, 0, w, h);
            URL.revokeObjectURL( img.src );
            img = null;

            if (files.length > counter) {
                counter++;
                loadImage(files[counter]);
            }
        };

        var URL = window.URL || window.webkitURL;

        img.src = URL.createObjectURL( file );

        var thumbnail = document.getElementById("thumbnail");
        thumbnail.appendChild(canvas);
    }
}

Exemplo no jsfiddle

O meu exemplo foi construido com base nesta resposta do SOEN.

E nesse artigo de como fazer o crop: HTML5 Canvas Image Crop Tutorial

1
  • Achei muito interessante este exemplo, porém queria usar o imageresizing.net para exibir o preview pois o usuário teria noção de como a imagem ficaria quando fosse exibida na página, já o seu exemplo corta partes da imagem ao qual vai aparecer quando a imagem real for exibida para o usuário. Commented 7/04/2014 às 13:28
1

Acredito que sua melhor aposta neste sentido seria subir realmente a imagem via AJAX para um diretório de trabalho temporário e serví-la na hora, ao invés de carregá-la com FileReference. Isso também tornaria mais compatível a solução, já que FileReference só funciona em alguns navegadores modernos.

Observe que muitos sites já fazem isto. Você faz o upload da figura e trabalha com ela para fazer o corte e depois aplica as transformações e salva no destino final.

É um requisito necessário que você faça o preview da imagem sem subir absolutamente nada ou é apenas para não sair da página?

Se for pelo segundo motivo, hoje há diversos plug-ins que podem enviar um arquivo sem sair da página e tem call-backs para você poder responder quando o arquivo terminou de ser enviado, como http://zurb.com/playground/ajax-upload

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 .