Jcrop distorting the image at the time of selection

Question

Jcrop distorting the image at the time of selection

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

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

Insteadofdoingso:

The js looks 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" );
            }
        }
    });

});

javascript jquery jquery-ui jcrop

asked by anonymous 08.03.2014 / 14:10

2 answers

1

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

If you do not want to set the cut ratio, this property should be omitted (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 set aspectRatio: 16 / 9 .

08.03.2014 / 14:33

Send file to site and get file path How to change running route?

score 0 · Accepted Answer

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