clientImageSelectCropper.js – Selecione, corte e veja um preview de imagens tudo do lado cliente

github-mark

Olá pessoal. Neste post eu explico como utilizar uma biblioteca que fiz a um tempo atrás e resolvi compartilha-lá de forma open-source. Com esta biblioteca é possível selecionar, cortar e salvar imagens do lado cliente. Poupando um trabalho do desenvolvedor.

Utilizando JCrop para cortar imagem e também um canvas dinâmico na pagina para criar imagens em base 64, é possível entregar uma rápida e boa solução para o usuário do sistema, onde o usuário fará o upload da imagem dele e depois o corte sem dar 1 requisição ao servidor.

Este plugin proporciona também uma boa solução para desenvolvedores por que realiza estas operações todas no lado cliente, tudo via javascript. E fazendo isso evita implementações a mais em relação a pastas temporárias de imagens e também a logica de transferir estas imagens para o ambiente padrão.

Dependências

  • jQuery
  • JCrop

Como Usar

Uma simples demonstração:

Este código irá gerar a seguinte tela:

clientImageSelectCropper

Depois disso o usuário pode selecionar uma imagem para cortar

Capturar2

Depois de cortada esta imagem será carregada no elemento ‘imgTargetArea’:

Capturar3

Outras propriedades e eventos que podem ser enviadas

Estes são as outras informações que podem ser enviadas para o plugin:

Outras demonstrações

Voce pode acessar outras demonstrações clicando aqui.

Contribua

Gostou? quer contribuir? Acesse o repositório deste plugin, faça seu fork e faça pull requests, por que nada melhor do que outras visões do mesmo problema pra gente realizar uma ótima solução 😀

É isso ai, qualquer dúvida só postar nos comentários.

Kelvin Rodrigues

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