Javascript ImageAreaSelect：根据aspectRatio预先选择最大的缩略图

这是我第一次尝试的方式：

$('#thumbnail').imgAreaSelect({ 
    x1: 5,
    y1: 5,
    x2: $('#thumbnail').width(),
    y2: $('#thumbnail').width()*0.66,
    aspectRatio: '1:0.66'
});

但是一些被裁剪的图像不会溢出

这似乎是对我尝试的大多数图像分辨率的预选

var thwidth = $('#thumbnail').width();
var thheight = $('#thumbnail').height();
aspectRatio = 0.66;

$('#thumbnail').imgAreaSelect({ 
    x1: 5,
    y1: 5,
    x2: thwidth - 80,
    y2: (thwidth - 80) * aspectRatio,
    aspectRatio: '1:0.66'
});

但它不会选择可能的最大值；而且我觉得它有点脏

如何选择最大的（如有可能，以中心为中心）宽高比坐标？（在本例中：1:0.66）

尝试此代码

        var selWidth = 500;

        var photo = $('#photo'),
           photoWidth = parseInt($('#photo').width()),
           maxWidth = Math.min(selWidth, photoWidth)
           aspectRatio = 0.66,
           maxHeight = maxWidth * aspectRatio,
           yTop = parseInt(photo.height()) / 2 - maxHeight / 2;

        $('img#photo').imgAreaSelect({
           x1: photoWidth / 2 - maxWidth / 2,
           y1: yTop,
           x2: (photoWidth / 2 - maxWidth / 2) + maxWidth,
           y2: yTop + maxHeight
        });

此代码创建一个以给定纵横比和最大宽度为中心的选择区域。如果最大宽度超过图像的最大宽度，它将使用图像的宽度作为最大宽度。请注意，它与jquery 1.8.3兼容，我认为这是因为imageareaselect插件与最新的jquery版本不兼容（不过我不确定）

---

更新 我对代码进行了改进，以包括高度溢出wo和aspectRatio>1的情况。我希望这在所有情况下都有效：）

我准备了一点。 这比Ejay花了我一点时间，但我包括了一个视觉演示

在计算了拇指的位置和宽度之后，你可以这么简单地说。（使用fiddle中的变量名）

---

向上投票选择最大宽度。好电话。：）这个脚本在纵横比大于1的情况下工作吗？（例如，肖像模式拇指）您好！谢谢你的时间！我马上就要考试了。。我不明白的是，为什么var selWidth是一个常数（wich width表示宽度）？它应该是从图像中裁剪出的区域的最大大小。如果图像大得多，它只会选择中间的500px部分。

selWidth

定义选择区域宽度。如果将

selWidth

设置得太大，它只会选择整个图像的宽度。如果你不想手动设置，只要在你觉得合适的地方做

maxWidth=photoWidth

。我明白了，我用自己最大的posible替换了它。这太棒了！谢谢

        var selWidth = 350;

        var photo = $('#photo'),
           photoWidth = parseInt($('#photo').width()),
           photoHeight = parseInt($('#photo').height()),
           maxWidth = Math.min(selWidth, photoWidth),
           aspectRatio = 0.66,
           maxHeight = maxWidth * aspectRatio;

        if (maxHeight > photoHeight) {
           maxHeight = photoHeight;
           maxWidth = maxHeight * ( 1 / aspectRatio);
        }

        var yTop = photoHeight / 2 - maxHeight / 2;

        $('img#photo').imgAreaSelect({
           x1: photoWidth / 2 - maxWidth / 2,
           y1: yTop,
           x2: (photoWidth / 2 - maxWidth / 2) + maxWidth,
           y2: yTop + maxHeight
        });

$('#thumbnail').imgAreaSelect({ 
    x1: thumbX,
    y1: thumbY,
    x2: thumbX+thumbW,
    y2: thumbY+thumbH,
});