Search code examples
javascriptjqueryjcrop

How to center JQuery JCrop in the center of the picture


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?


Solution

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