ImageAreaSelect：预选最大的缩略图，尊重aspectRatio [英] ImageAreaSelect: preselect biggest thumbnail possible respecting aspectRatio

问题描述

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

This is how I first tried:

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

但是一些裁剪后的图像不在溢出...

But some of the cropped image stay off the overflow...

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

This seems to make a preselection for most of the image resolutions I tried...

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

但它不会选择最大值;加上它看起来有点脏......

But it won't select the maximum possible; plus it looks a bit dirty to me...

如何选择最大（如果可能的话，中心）宽度/高度坐标尊重宽高比？ （在这种情况下：1：0.66）

How can I select the biggest (centereded, if possible) width/height coordinates that respects the aspect ratio? (in this case: 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
        });

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

jsfiddle This code creates a centered selection area with given aspect ratio and max width. If max width exceeds that of the image, it uses image's width as max width. Please note that it works with jquery 1.8.3 which I think is because of the imageareaselect plugin not being compatible with newest jquery verions (I'm not sure though).

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

I've improved the code to include the cases of height overflwo and aspectRatio > 1. I hope this works in all conditions :)

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

这篇关于ImageAreaSelect：预选最大的缩略图，尊重aspectRatio的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！