Programação / jQuery

Aprenda a trabalhar com CropperJS e faça o redimencionamento e corte da sua imagem de maneira descomplicada

Com essa biblioteca em seu sistema você tem um mecanismo para que o usuário possa efetuar o upload de uma mídia e selecionar a área de focagem para uma foto de perfil, assim como no facebook, instagram e qualquer outra mídia social

Por Gustavo Web

Publicado por Gustavo Web
em 23/11/2018 às 09h50

Lista VIP UpInside

Entre para nossa lista VIP e receba vídeo aulas, artigos e tutoriais exclusivos e com prioridade

  QUERO ENTRAR

Aula exclusiva UpInside Play

Acessar aula no Play

Compartilhe:

Quem que nunca pensou em colocar o sistema de crop e resize dentro da sua plataforma, mas acabou se enrolando com a biblioteca javascript e não entendi direito como funcionava todo o processo?

Salve salve moquerido, Gustavo Web aqui e hoje vamos atender mais um pedido do UpInside Play e vamos colocar a lib CropperJS para rodar dentro da nossa aplicação de teste.

Para você já se familiarizar com a biblioteca, eu vou deixar aqui alguns links para que você possa fazer a leitura e até mesmo testar o recurso.

Página da lib rodando com exemplo (É a Hermione na foto? rs)

Página da documentação

É claro que o conteúdo está em inglês, mas se estiver no Google Chrome você consegue traduzir tranquilamente com um clique.

Funcionalidades

Embora não vamos aplicar todos os recursos que há nessa lib, dá para você ter noção da quantidade de funcionalidade que pode se ter! Zoom, Rotate, Aspect Ratio... No nosso caso vamos deixar somente a área de seleção e vamos montar um preview rápido! Basicamente o que já tem no exemplo... Mas isso dentro do nosso sistema, com nosso javascript monitorando nossos eventos e elementos.

Quando você fizer isso, 90% do caminho já está feito e se parar para reparar vai notar que fizemos menos de 10 linhas de código.

Vamos adicionar a possibilidade também de gerar uma nova imagem de acordo com os dados obtidos, que é o que recomendo para implementação no seu sistema... O fluxo vai ficar mais ou menos assim:

  1. A pessoa vai acessar o seu site e fazer o upload de uma imagem qualquer!
  2. Você vai tratar o upload e vai jogar isso para sua pasta de mídias (uploads, storage...)
  3. Vai mostrar uma modal ou até mesmo uma outra tela para que ela possa croppar a imagem de acordo com o que ela deseja
  4. Quando salvar as alterações o sistema vai excluir a imagem original e colocar a nova no lugar.
  5. (Opcional) Renomear o arquivo, e caso faça alteração no nome, não se esqueça de atualizar o endereço no banco de dados também.

Geração de uma nova Imagem

Você tem duas possibilidades nesse ponto! Como mostro na aula, conseguimos pegar a imagem convertida em base64 como uma string... Se você quiser até pode salvar esse valor no banco de dados, mas eu não recomendo a prática.

Se é uma imagem, deve ficar junto das outras imagens.

Nesse caso vamos trabalhar com apenas uma linha do PHP para gerar a imagem de acordo com essa string, e para montar essa requisição vamos disparar um POST através do jQuery.

Material de Apoio

Você notou que eu tinha um sistema bem simples no início da aula e tanto ele quanto o projeto final estão no link abaixo para que você possa consultar e usar como base de estudos :)

Clique aqui para acessar o repositório dessa aula

Feedback

Espero que você tenha gostado desse conteúdo e que consiga reproduzir no seu sistema :)

Qualquer coisa, estarei disponível aqui abaixo nos comentários para conversarmos!

Compartilhe:

Em Programação:

Deixe seu comentário: