Criando um preview de imagens em HTML5

Olá pessoal, tudo certo?

Hoje vou escrever sobre HTML5 novamente (fazia tempo! :D), a ideia é criar um preview de imagens simples utilizando drag & drop. O preview de imagens é uma agregação bem interessante para os sistemas que rodam na web atualmente. Este passo apenas mostrará uma imagem, no entanto a partir deste ponto, pode-se fazer uma página de upload via drag & drop como no Dropbox ou até mesmo como os anexos do GMail.

Para desenvolver o nosso preview iremos utilizar as APIs drag & drop e File do HTML5. Vale lembrar que este exemplo não funciona no Opera 12.15 e no Safari 5.1.7 do Windows (ao menos no teste que fiz não rodaram devido a inexistencia de window.URL.createObjectURL, corrijam-me se estiver enganado). Então vamos aos códigos que interessam.

Abaixo estão o HTML e CSS, que por ventura são bem simples.

Agora vem a parte interessante e onde a magia acontece, o javascript 🙂

Começamos adicionando um evento de load para a window e criando duas classes estáticas que iremos utilizar.

Vamos começar pela classe ImageHelper que tem a finalidade de criar uma imagem.

Na classe ImageHelper temos então uma propriedade chamada image que é um protótipo da imagem que utilizamos para criar as imagens que são exibidas. Também temos um método estático que clona a imagem protótipo e adiciona os atributos src e alt.

Agora vamos para a parte principal, a classe DragDrop.

Iniciamos com dois atributos (element e isOver) e três métodos pequenos. O atributo isOver apenas indica se o mouse está sobre elemento alvo (body). O método removeDragTarget apenas retira a classe css .drag-target e atribui false para o atributo isOver. O método init inicializa os listeners necessários para o elemento. O método onDragLeave é um listener para o evento dragleave do body, este listener apenas chama removeDragTarget.

Vamos para o listener onDragOver.

Este listener apenas verifica se o atributo isOver não é false e então adiciona a classe css e atribui o valor true para isOver. A última linha no entanto é a mais importante neste contexto, a chamada de evt.preventDefault(). Por padrão ao disparar dragover o drop é cancelado, desta forma estamos cancelando o evento default (cancelar drop) e permitindo que o evento drop seja disparado ao soltar o mouse.

Por fim temos então o evento drop que é onde adicionamos as imagens à página.

Inicialmente pegamos os arquivos através da propriedade files da propriedade dataTransfer do evento. Iteramos sobre estes arquivos e filtramos para pegar apenas os que são imagens. Criamos uma url para a imagem, depois criamos uma tag img através da classe ImageHelper e por fim adicionamos ao elemento alvo (body).
Aqui vale ressaltar também a importância da chamada de evt.preventDefault(). Neste momento se não fosse feita a chamada deste método o browser iria apenas exibir o arquivo e não mostrar a nossa página com o preview.

E agora nosso preview simples de imagens está pronto \o/.
Abaixo segue o javascript completo e os arquivos também estão no GitHub e também tem a demo no JsBin.

Até a próxima.

Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s