ImageAreaSelect:预先选择最大的缩略图

ImageAreaSelect: preselect biggest thumbnail possible respecting aspectRatio

本文关键字：略图 选择 ImageAreaSelect      更新时间：2023-09-26

我是这样尝试的:

$('#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
        });
这段代码创建了一个居中的选择区域，具有给定的长宽比和最大宽度。如果max width超过图像的宽度，则使用图像的宽度作为max width。请注意，它的工作与jquery 1.8.3，我认为这是因为imageareaselect插件不兼容最新的jquery版本(我不确定虽然)。

更新我已经改进了代码，包括高度溢出和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
        });

我准备了这个小提琴。我花的时间比jay长一点，但我做了一个视觉演示。

计算完拇指的位置和宽度后，你可以称之为简单的。(使用变量名)

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