Jcrop distorting the image at the time of selection

Question

I want to use Jcrop in one .dialog(), but it is not working properly, the selection of Jcrop is getting wrong, distorting the image:

Instead of doing like this:

The js is like this:

$('.imagem_principal').live('click', function() {
    var foto = $(this).parent().parent().find('a').attr('href');

    var form = '<div id="box-crop"><img src="'+foto+'" id="foto-crop"></div>';

    $(form).dialog({
        open: function(event, ui) { 
            $("#foto-crop").Jcrop({
                setSelect: [0, 0, 140, 360],
                minSize: [140, 360],
                aspectRatio: 1
            }); 
        },
        autoOpen: true,
        width: 800,
        height: 600,
        title: "Corte imagem principal",
        buttons: {
            "Cortar foto": function() {
                $( this ).dialog( "close" );
            },
            "Cancelar": function() {
                $( this ).dialog( "close" );
            }
        }
    });

});

Answer 1

You are defining aspectRatio: 1 which means you want the cutting area to have a fixed ratio, in this case a perfect square, while the selection you set is not a square setSelect: [0, 0, 140, 360].

If you don’t want to set the cut ratio, this property should be omitted (I’m not sure if the default value is 0).

Try this:

$("#foto-crop").Jcrop({
    setSelect: [0, 0, 140, 360],
    minSize: [140, 360]
});

Another example of using aspectRatio, if you wanted a ratio set to 16:9 (HDTV) would define aspectRatio: 16 / 9.

Answer 2

The problem was in css, the css file of my application contained two classes in common with jcrop’s css, just change that worked. My classes were forcing the image size, so the selection area was distorted.