Set max-height and max-width in JCrop

Question

i want to crop images in this dimension (900 * 300) .. i use JCrop this is my code :

<img src="1434467640.png" id="target" alt="" />
<input type="text" id="x" name="x">
<input type="text" id="y" name="y">
<input type="text" id="w" name="w">
<input type="text" id="h" name="h">

JS :

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

    initJcrop();

    function initJcrop() {
            jcrop_api = $.Jcrop('#target', {
            onSelect: storeCoords,
            onChange: storeCoords
            });
            jcrop_api.setOptions({ aspectRatio: 3 });
            jcrop_api.setOptions({
allowResize: false ,
            minSize: [900, 300],
            maxSize: [900, 300]
        });
        jcrop_api.setSelect([0, 0, 900, 300]);
    };



    function storeCoords(c) {
    jQuery('#x').val(c.x);
    jQuery('#y').val(c.y);
    jQuery('#w').val(c.w);
    jQuery('#h').val(c.h);
    };        
});

I want to limit max width and max height for big images ! is there some parameters ?

Answer 1

You can set the maximum proportions for the box containing the image by setting:

boxWidth: 450,   //Maximum width you want for your bigger images
boxHeight: 400,  //Maximum Height for your bigger images

If you would like to set it as you did

minSize: [ 900, 300],
maxSize: [ 900, 300]

The whole code for initialization would be:

$('#cropbox').Jcrop({
    aspectRatio: (900/300), // This should be Width/Height
    boxWidth: 800,   //Maximum width you want for your bigger images
    boxHeight: 600,  //Maximum Height for your bigger images
    onSelect: updateCoords,
    minSize: [ 900, 300 ],
    maxSize: [ 900, 300 ]
});

This would set the box to 800x600 and the image is scaled inside. The selected area will be exactly 900x300pixels. Good luck