AjaxianosCrop de imagem com jQuery
Este é mais um lindo exemplo de coisas possíveis de se fazer usando jQuery, um dos meus projetos para breve é fazer um editor de imagem com zoom, crop, rotate e flip… com certeza esse exemplo será utilizado.
o jCrop é mais uma lib jQuery que veio de uma alma abençoada pra ajudar nossa vida!
é muito simples de instalar e configurar e possui vários recursos muito úteis como “thumbnail” que te mostra separado exatamante a area que será recortada, os “Event Handlers” acionam no onChange em tempo real as informações de coordenadas do crop, o “Animation” também é útil para deixar tamanhos e posições pré-programadas para corte, e além disso é muito simples mudar o estilo do cropper, você pode mudar a cor da area e dos cantos do handle.
Exemplo:
jQuery(function() {
jQuery('#jcrop_target').Jcrop({
setSelect: [ 20, 130, 480, 230 ],
addClass: 'custom',
bgColor: 'yellow',
bgOpacity: .8,
sideHandles: false
});
});
CSS Customizado:
.custom .jcrop-vline, .custom .jcrop-hline {
background: yellow;
}
.custom .jcrop-handle {
border-color: black;
background-color: #C7BB00;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
Agora que você ja ficou curioso, segue aí o link http://deepliquid.com/projects/Jcrop/demos.php?demo=handler
Excelente indicação! Muito bom, mesmo!
Ainda hoje estava ensinando um colega a mexer num sistema que tinha isso e me perguntava sobre um plugin para jQuery (que uso como framework padrão) para conseguir o mesmo efeito.
Como é a vida, não?
Abraços!
Boa Sr. Lima.
Será de muita utilidade esse crop.
Muito bom!
jQuery sim vai dominar o mundo!
[...] onde você não consegue mais vê-la. Para resolver este problema eu tive que debugar o código do plugin jCrop até encontrar o ponto exato que faz com que a inconsistência ocorria. Por incrível que pareça, [...]
[...] já postei anteriormente uma opção de crop de imagens usando jQuery(http://www.ajaxianos.com.br/2008/09/crop-de-imagem-com-jquery/), agora um plugin para mootools me chamou a atenção, ele foi desenvolvido pelos caras da [...]
Olá Vender, tudo bem? Há tempos uso esse plugin, mas agora tô tendo um problema, e gostaria que vc me desse uma força com isso – se possível.
Bom ao utiliza-lo em lightbox (nyromodal) o mesmo não funciona. Você saberia me dizer pq disso?
Grato, Assunção Júnior.
Olá Wender!
Vim aqui agradecer a sua resposta a pergunta que deixei aqui nos comentários. Ele realmente 10! Resolveu o problema de forma rápida e fácil.
Muito obrigado mesmo. Abaixo segue a dica que vc me passou:
Wender: “O crop usa posicionamento do browser pra definir as areas do crop, provavelmente ele fica perdido dentro do lighbox pq perde a referencia do browser… só se vc usasse o crop dentro de um iframe e chamasse o iframe dentro do lightbox, tenta isso, pode ser que funcione”.