JQuery JCrop - How to set a fixed size selection a

问题:

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

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

});

回答2:

you can set the aspectRatio as decimal value

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

回答3:

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

回答4:

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

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

回答5:

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

回答6:

It's remarkably easy...

allowResize: false

e.g.

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

回答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>