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

I'd rather go for a fixed aspect ratio and resize server side. — Svish, Feb 26 '12 at 10:06

score 37 · Answer 1 · answered Jan 20 '10 at 15:25

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

});

I found [this demo](http://deepliquid.com/projects/Jcrop/demos/tutorial5.html) shows off the full feature set of jCrop quite nicely. — quickshiftin, Oct 28 '14 at 05:54
@Corey Ballou, Can we add a rectangle or any other shape using JCROP js? — ArjunArora, Feb 09 '18 at 08:13

score 14 · Answer 2 · edited Mar 13 '12 at 13:56

14

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

edited Mar 13 '12 at 13:56

Tomasz Kowalczyk

10,472
6
52
68

answered Jul 31 '09 at 05:13

The Disintegrator

4,147
9
35
43

A square is not the same thing as a fixed size. – Corey Ballou Jan 20 '10 at 15:34
1

Then he should use something like minSize: [ 100, 150], maxSize: [ 100, 150] http://deepliquid.com/content/Jcrop_Manual.html Specifying the same dimensions for min and max – The Disintegrator Jan 21 '10 at 05:11

score 14 · Answer 3 · answered Feb 08 '10 at 21:32

14

you can set the aspectRatio as decimal value

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

answered Feb 08 '10 at 21:32

tuffkid

141
1
2

score 7 · Answer 4 · answered Jul 07 '12 at 22:18

7

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

answered Jul 07 '12 at 22:18

CyberJunkie

21,596
59
148
215

score 6 · Answer 5 · answered Dec 06 '08 at 14:08

6

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

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

answered Dec 06 '08 at 14:08

muhuk

15,777
9
59
98

1

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. – Corey Ballou Jan 20 '10 at 15:35

score 4 · Answer 6 · edited May 22 '13 at 10:10

4

It's remarkably easy...

allowResize: false

e.g.

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

edited May 22 '13 at 10:10

answered May 22 '13 at 09:49

WalterEgo

515
6
20

score 1 · Answer 7 · answered Mar 09 '11 at 07:08

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>

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

7 Answers7

Linked