CODEWITHSUNDEEP
jquerycropjcrop
user43092
user43092

Reputation: 363

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

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

Upvotes: 30

Views: 68595

Answers (7)

WalterEgo
WalterEgo

Reputation: 525

It's remarkably easy...

allowResize: false

e.g.

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

Upvotes: 4

CyberJunkie
CyberJunkie

Reputation: 22674

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

Upvotes: 7

The Disintegrator
The Disintegrator

Reputation: 4187

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 :-)

Upvotes: 14

Vipul Pawsakar
Vipul Pawsakar

Reputation: 81

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>

Upvotes: 1

tuffkid
tuffkid

Reputation: 141

you can set the aspectRatio as decimal value

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

Upvotes: 14

Corey Ballou
Corey Ballou

Reputation: 43467

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]);

});

Upvotes: 37

muhuk
muhuk

Reputation: 16085

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

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

Upvotes: 6

Related Questions