How to center JQuery JCrop in the center of the picture

Question

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?

Cooperstein

No -__- Of course I tries many things. Can you help or not? Nothing in the manual. Please, be polite. – Cooperstein

@Cooperstein what everyone wants to say (I assume) is that you should give enough evidence in your question which helps the community believe that you have put some efforts in solving the problem. Give examples of what you have tried and what didn't work out etc. I am somehow unable to find the question on meta which talked about asking the right way. – Reclinate

Thanks TJ, it's more clear when said like that ;) – Cooperstein

Answer 1

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

Reclinate

Thanks, great code! I'll share my full code to help someone needs: var w = 189; var h = 250.5; var W = canvasOriginal.width; var H = canvasOriginal.height; var x = W / 2 - w / 2; var y = H / 2 - h / 2; var x1 = x + w; var y1 = y + h; $('#canvas').Jcrop({ onSelect: App.saveImageCrop, setSelect:[ x, y, x1, y1 ], }); – Cuneate

fing love you man, probably saved me over 8 hours... – Maunder