Problema com jCrop + Scroll

2009-02-17 Wender Lima Dicas

Este post é para ajudar aqueles que porventura venham a ter o mesmo problema que eu tive
No sistema de imagem que estou desenvolvendo, tenho uma área de tamanho limitado para as imagens, por isso o css do meu container possui “overflow:auto” para que quando a imagem ultrapassar a área do editor, esta fique com um scroll.
O problema do jCrop é o seguinte, quando é necessário fazer a seleção de uma região da imagem abaixo da área visível(que seja necessário rolar o scroll da DIV) e mudar sua posição, o scroll volta para a posição Top 0 Left 0, o seu cursor continua parado na tela e a área de seleção fica lá embaixo 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, este problema ocorre apenas quando um recurso está habilitado, o “keySupport”, sendo assim, para resolver o problema, basta mudar sua condição padrão para “false”

Exemplo:

jQuery(function() {
	jQuery('#jcrop_target').Jcrop({
		keySupport: false
	});
});

Sendo assim o suporte a teclas não funcionará, mas seu crop(que mais importa) continuará bonito

Uma outra opção(que no meu caso não é viável já que o tamanho da área varia de acordo com uso do browser e resolução da tela), seria definir o tamanho da área destinada ao Crop

Exemplo:

$(function() {
    $('#cropbox').Jcrop({ boxWidth: 450, boxHeight: 400 });
});

Espero que essa dica possa ajudar muita gente, pra que não fiquem igual algumas pessoas(eu) pastando horas para tentar solucionar esse problema.

jCrop,