How to center JQuery JCrop in the center of the picture

javascript jquery jcrop

Thermech · Dec 3, 2012 · Viewed 7.9k times · Source

I want to start JCrop selection in the center of the picture. Is there a way to do it?

Is there a option or something? It's not specified in the manual.

Do we have to calculate it manually?

Answer

In case you are not able to figure out how to set the selection in the centre :

Check the setting options http://deepliquid.com/content/Jcrop_Manual.html#Setting_Options

Something like this (taken from the API ref) :

<script language="Javascript">

    jQuery(function($) {
        $('#target').Jcrop({
            onSelect:    showCoords,
            bgColor:     'black',
            bgOpacity:   .4,
            setSelect:   [ x, y, x1, y1 ],
            aspectRatio: 16 / 9
        });
    });

</script>

If w is the width and h is the height of the desired selection and W is the width of the image, H is the height of the image, the coordinates will be

x = W/2 - w/2
y = H/2 - h/2
x1 = x + w
y1 = y + h

(I hope my math is right :)

How to center JQuery JCrop in the center of the picture

Answer

Related questions