Question

我正在尝试编写一个javascript函数来根据给定区域调整图像大小（或者在我的情况下（有些不准确）'平均尺寸'，因为这样更容易思考。而不是提供最大高度和宽度，我想以最大面积进食，这样长或窄的图像在视觉上看起来大致相同。

enter image description here

我真的很喜欢它的数学方面，但是...它是如何逻辑的，因为我最近没有做太多的数学。

基本上，给定纵横比，我想确定一个区域内的最大尺寸。

这样的事情：

function resizeImgByArea(img, avgDimension){
    var w = $(img).width();
    var h = $(img).height();
    var ratio = w/h;
    var area = avgDimension * avgDimension;
    var targetHeight //something involving ratio and area
    var targetWidth //something involving ratio and area
    $(img).width(targetWidth);
    $(img).height(targetHeight);
}

不确定这是否属于主题，但我无法解读它。

Answer 1

听起来你想要将缩略图的像素限制为尽可能接近平均区域，就像所有其他缩略图一样，对吗？

基本上，考虑到原始图像的h / w和目标区域A：

h * w = original image's pixel size (let's got with 640x480 = 307,200 pixels)
A = maximum number of pixels allowed (let's go for 100x100 = 10,000 pixels)

307,200 / 10,000 = 30x reduction

original aspect ratio = 640 / 480 = 1.3333 : 1

计算新缩略图的x / y尺寸：

newX * newY = 10000
newX = newY * 1.333
(newY * 1.333) * newY = 10000
newY^2 * 1.333 = 10000
newY^2 = 10000 / 1.333
newY^2 = 7502
newY = 86.6 -> 87
newX = 87 * 1.333 = 115.97 -> 116

116 x 87 = 10,092 pixels

如果我们向下缩小缩略图尺寸，我们会得到86x114 = 9,804像素

所以......要将640x480图像转换为标准的10,000像素大小，您需要新的图像尺寸为86-87高度和114-116宽度。

Answer 2

您正在寻找类似的东西：

function resizeImgByArea(img, avgDimension) {
    var w = $(img).width();
    var h = $(img).height();
    var maxWidth = avgDimension;
    var maxHeight = avgDimension;
    var divisor;
    var targetWidth = w;
    var targetHeight = h;

    if (w > maxWidth || h > maxHeight) {
        // Set the divisor to whatever will make the new image fit the dimensions given
        if((w - maxWidth) > (h - maxHeight)) {
            divisor = w / maxWidth;
        }
        else {
            divisor = h / maxHeight;
        }

        targetWidth = w / divisor;
        targetHeight = h / divisor;
    }

    $(img).width(targetWidth);
    $(img).height(targetHeight);
}

Answer 3

这并不难。

maxPix = average ^ 2

maxPix = x * h + x * w

平均值^ 2 = x * h + x * w //：x

平均^ 2 / x = h + w

反向并乘以平均值^ 2

x =平均^ 2 /（h + w）

然后将h和w乘以x得到新的维度

Answer 4

这是我提出的功能，它比一些提到的更简单，并且做我需要的功能。由于我正在使用的特殊要求，它约束到一个设置的maxWidth而不是高度。抛出一个maxHeight以及一些清理可能是合适的，但是它已经完成了。

function resizeImgByArea(imgId, avgDimension){
   var node, w, h, oldArea, oldAvgDimension, multiplicator, targetHeight, targetWidth, defAvgDimension;
   node = $('#' + imgId);
   node.css('width', '').css('height', '');
   var maxW = $('#' + imgId).css('maxWidth');
   if (maxW){
       defAvgDimension = maxW;
   } else {
       defAvgDimension = 200;
   }
   avgDimension = (typeof avgDimension == "undefined")?'defAvgDimension':avgDimension;
   w = node.width();
   h = node.height();
   oldArea = w*h;
   oldAvgDimension = Math.sqrt(oldArea);
   if (oldAvgDimension > avgDimension){
       multiplicator = avgDimension / oldAvgDimension;
       targetHeight = h * multiplicator;
       targetWidth = w * multiplicator;
       node.width(targetWidth);
       node.height(targetHeight);
   }
}

Answer 5

function fitImageInArea(img, area) {
    var r;

    if (img.width/img.height >= area.width/area.height) {
        r = area.width / img.width;
        img.width = area.width;
        img.height = img.height*r;
    } else {
        r = area.height / img.height;
        img.height = area.height;
        img.width = img.width*r;
    }

    return img;
}

以width和height属性作为参数提供图像或任何内容。 area参数也假设width和height属性。

按区域调整图像大小

5 个答案: