2

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

$('#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）

4

2 回答 2

5

试试这个代码 

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

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

更新

我改进了代码以包含height overflwo和aspectRatio > 1的情况。我希望这适用于所有条件:) 

        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
        });
于 2013-04-17T11:36:59.330 回答
3

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

计算出拇指的位置和宽度后，就可以这么简单了。（使用小提琴中的变量名）

$('#thumbnail').imgAreaSelect({ 
    x1: thumbX,
    y1: thumbY,
    x2: thumbX+thumbW,
    y2: thumbY+thumbH,
});
于 2013-04-17T11:58:42.133 回答