按区域调整图像大小

Question

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

I。我真的越来越不过，我明白了它的数学方面......只是如何逻辑它，因为我最近没有做太多数学工作，

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

：

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

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

基本上，给定原始图像的高/宽和目标区域 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 *

waverage^2 = x*h + x*w //: xaverage

^2/x = h+w

逆并乘以average^2

x =average^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 属性。