Cortar e redimensionar imagens com este simples plugin jQuery

Recorte dinâmico de imagem é mais fácil do que nunca graças a bibliotecas como o jQuery. O codebase é fácil de usar e a comunidade tem milhares de plugins para manipulação de imagens.

Um desses plugins é Cultivador, uma solução de imagem de código aberto e livre que lida com zoom, recorte, e até mesmo salvar imagens.

Este projeto é disponível no GitHub com algum muito documentação extensa com dezenas de recursos personalizados.

O Cropper dá a você (ao desenvolvedor) controle completo sobre todos os aspectos da interface. Você pode trabalhar com Mais de 30 opções diferentes e Mais de 20 métodos personalizados embutido no plugin Cropper.

Está totalmente sensível ao toque, por isso funciona em todos os dispositivos móveis e suporta a roda de rolagem / trackpad para zoom in e out de fotos. Os usuários podem giro, rodar, escala, e Reposição fotos em qualquer lugar na tela antes de recortar.

O plugin Cropper requer uma cópia do jQuery e isso vem com dois arquivos: uma folha de estilo CSS e a biblioteca de plugins JavaScript. Basta adicionar esses arquivos à sua página e deve ser bom!

Lembre-se, esta ferramenta vem com muito de recursos. A documentação on-line pode ajudar, mas você precisará sujar as mãos configurando um campo de upload de imagem você mesmo para aprender tudo. Seu código de amostra apenas produz tudo para o console e parece algo como isto:

 $ ('# image'). cropper (aspectRatio: 16/9, crop: function (e) // Mostra os dados do resultado para cortar a imagem. console.log (ex); console.log (ey); console. log (e.width); console.log (e.height); console.log (e.rotate); console.log (e.scaleX); console.log (e.scaleY);); 

Mas você deveria dar uma olhada no demonstração ao vivo para ver como tudo isso funciona.

Você pode encontrar dados de saída ao vivo das coordenadas X / Y, juntamente com o dimensões da imagem perto do topo. Cropper também inclui um recurso de upload onde o usuário pode selecionar uma imagem de seu computador e começar a cortar diretamente no navegador.

Miniaturas ao vivo atualizar no canto, assim você pode ver como é o resultado final antes de salvar. Altere o proporção da tela, a qualidade de saída, a posição de colheita padrão, e um monte mais.