jCrop：设置任何尺寸的上传图像的方形选区（居中）

Question

我想为我的用户提供通过 jCrop 裁剪上传图像的能力。结果应该是正方形格式。选区应显示在图像的中心，沿最短尺寸两侧留出约 10% 的间隙。当前代码：

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

所以我需要一种方法来将 x1、y1、x2、y2 值设置到正确的位置，而不是硬编码值。

Answer 1

使用预览方法中的坐标作为数组的参数：

 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 
                     ]
        });

这需要一些尝试错误地找到模式并使其一致工作。