jCrop: Set a square selection (centred) of an uploaded image of any dimensions

I would like to offer my users the ability to crop their uploaded image via jCrop. The result should be a square format. The selection should appear centred in the image, with about a 10% gap either side along the shortest dimension. Current code:

        jcrop_api = $.Jcrop('#imgCrop', {
            onSelect:    storeCoords,
            onChange:    storeCoords,
            aspectRatio: 1
            setSelect:   [20, 20, 280, 280]
        });

so rather than hardcoded values I need a way to set开发者_StackOverflow社区 the x1, y1, x2, y2 values to the correct positions.

Use the coordinates from your preview method as parameters for the array:

 jcrop_api = $.Jcrop('#imgCrop', {
        onSelect:    storeCoords,
        onChange:    storeCoords,
        aspectRatio: 1
        setSelect:   [ ($('#imgCrop').attr('width') / 2) - 10, 
                       ($('#imgCrop').attr('height') / 2) - 10, 
                       ($('#imgCrop').attr('width') / 2) + 10, 
                       ($('#imgCrop').attr('height') / 2) + 10 
                     ]
        });

It will take some trial and error to find the pattern and get it to work consistently.