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

找到模式并使其始终如一地工作需要一些试验和错误。