Javascript 按区域调整图像大小

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

我真的被它的数学方面吸引住了，虽然…只是如何逻辑它，因为我最近没有做太多的数学

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

大概是这样的：

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

---

不确定这是不是在这里的主题，但我无法用大脑思考它。

您是否在寻找类似以下内容的内容：

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

没那么难

maxPix=平均值^2

maxPix=x*h+x*w

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

平均^2/x=h+w

求逆并与平均数^2相乘

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

---

然后将h和w与x相乘，得到新的尺寸

听起来像是要限制缩略图的像素尽可能接近所有其他缩略图的平均面积，对吗

基本上，给定原始图像的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=9804像素

---

因此…要将640x480图像转换为标准10000像素大小，您需要86-87高和114-116宽的新图像大小。

这里是我提出的函数，它比前面提到的一些函数更简单，并且满足我的需要。它限制为设置的maxWidth，但不是高度，因为我使用的特殊要求。

这可能是适当的扔在一个最大高度以及一些清理，但它得到'er完成

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

---

给出一幅图像或任何具有

宽度

和

高度

属性的对象作为参数。

面积

参数也假定

宽度

和

高度

属性。

不，我不希望将其设置为maxHeight或maxWidth。。而是在给定一个参数的情况下，使图像尽可能大，同时保持相同的纵横比最大面积..实际上，如果图像窄于正方形，则获得的图像大小大致相同。因此，您希望图像适合正方形？如果需要，必须剪裁图像？不，我希望它的总面积与正方形相同，但允许它延伸到正方形之外。或者您希望这样（targetWidth+targetSight）/2==averageDimension，并且保持了原始的纵横比？呃..这不太一样，但可能会起作用。基本上，尝试使图像的纵横比与原来相同，但使所有图像的大小都大致相同；我认为面积是最简单的方法。谢谢。是反向的，并乘以它自己的运算，or是在描述你上面所做的吗？我已经有将近10年没有上过数学课了。它描述了我所做的事情。所以倒过来就是（我不是英语母语人士）把值放在“线下”，所以x倒过来是1/x，1/2倒过来是2…当你有一个变量要解“线下”时，它很有用。你可以简单地反转所有的东西。然后我用平均数^2乘以x来理解你解释它的奇怪方式需要一段时间，因为它根本不能作为代码使用，但一旦我弄明白它就可以了！基本上它就是

newY=sqrt（newArea/aspectRatio）；newX=newY*aspectRatio

。

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