JQuery JCrop - How to set a fixed size selection area?

Question

I'm trying to figure out how to fix the selection box size under JCrop. The documentation mentions how to set an initial selection area but not how to make it fixed size. Does anybody knows how could I make it fixed. Thanks in advance.

http://deepliquid.com/content/Jcrop_Manual.html

Pish

I'd rather go for a fixed aspect ratio and resize server side. – Egad

Answer 1

You are basically looking for the API section. Having extensively used this plugin myself, I know exactly what you're looking for:

var api;
var cropWidth = 100;
var cropHeight = 100;

$(window).load(function() {

    // set default options
    var opt = {};

    // if height and width must be exact, dont allow resizing
    opt.allowResize = false;
    opt.allowSelect = false;

    // initialize jcrop
    api = $.Jcrop('#objectId', opt);

    // set the selection area [left, top, width, height]
    api.animateTo([0,0,cropWidth,cropHeight]);

    // you can also set selection area without the fancy animation
    api.setSelect([0,0,cropWidth,cropHeight]);

});

Miculek

I found this demo shows off the full feature set of jCrop quite nicely. – Hidden

@Corey Ballou, Can we add a rectangle or any other shape using JCROP js? – Poeticize

Answer 2

You can use the aspectRatio option. This will force a square selection

$(function(){
    $('#cropbox').Jcrop({
        aspectRatio: 1
    });
});

Or aspectRatio: 16/9 would make it wide sreeen :-)

Rosanne

A square is not the same thing as a fixed size. – Miculek

Then he should use something like minSize: [ 100, 150], maxSize: [ 100, 150] deepliquid.com/content/Jcrop_Manual.html Specifying the same dimensions for min and max – Rosanne

Answer 3

you can set the aspectRatio as decimal value

$('#jcrop_target').Jcrop({
    setSelect: [0,0,150,100],
    aspectRatio: 150/100
});

Sergo

Answer 4

aspectRatio: 1,
minSize: [ 100, 100 ],
maxSize: [ 100, 100 ]

Peper

Answer 5

Using this example you should be able to keep the size fixed.

$(function(){
    $('#jcrop_target').Jcrop({
        onChange: function(){ $(this).setSelect([x, y, x2, y2]); }
    });
});

Holozoic

That seems like a fairly hackish way of setting a fixed size crop area by forcing a resize after the change event has finished firing. – Miculek

Answer 6

It's remarkably easy...

allowResize: false

e.g.

$(function(){
    $("#CropSource").Jcrop({
        aspectRatio: 1,
        setSelect:   [50, 0, 300,300],
        allowResize: false
    });
});

Macedoine

Answer 7

Hi this might be helpful -

<script>
$(window).load(function() {
    var jcrop_api;
    var i, ac;

    initJcrop();

    function initJcrop() {
            jcrop_api = $.Jcrop('#imgCrop', {
            onSelect: storeCoords,
            onChange: storeCoords
            });
            jcrop_api.setOptions({ aspectRatio: 1/ 1 });
            jcrop_api.setOptions({
            minSize: [180, 180],
            maxSize: [180, 250]
        });
        jcrop_api.setSelect([140, 180, 160, 180]);
    };
    function storeCoords(c) {
    jQuery('#X').val(c.x);
    jQuery('#Y').val(c.y);
    jQuery('#W').val(c.w);
    jQuery('#H').val(c.h);
    };        
});
</script>

Phratry