Resize image by area

Question

I am trying to write a javascript function to resize an image based on a certain area (or in my case (somewhat inaccurate) of the "average dimension", as this is easier to think in terms of. Instead of eating the maximum height and width, I want to serve in maximum area so that long or narrow images are visually displayed in approximately the same size.

I really caught the mathematical aspect of this, though ... just how logical it is, since I haven't done a lot of mathematics lately.

Basically, given the proportions, I want to determine the maximum size within the area.

Something like that:

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

Not sure if this is the topic here, but I am not able to brain it.

Answer 1

Here is the function that I came up with, simpler than some of the ones mentioned, and does what I need. It limits the set maxWidth, but not the height due to the specific requirements that I used. It would be wise to pounce on maxHeight, as well as some cleanup, but it will be done.

 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 2

It looks like you want to limit the pixels of the thumbnails as close to the middle area as all the other thumbnails, right?

So basically, given the h / w of the source image and the target area A:

 h * w = original image pixel size (let got with 640x480 = 307,200 pixels) A = maximum number of pixels allowed (let go for 100x100 = 10,000 pixels) 307,200 / 10,000 = 30x reduction original aspect ratio = 640 / 480 = 1.3333 : 1 

To calculate the new sketch size 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 

if we rounded the dimensions of the thumbnails, we would get 86x114 = 9,804 pixels

therefore ... to convert your 640x480 image to a standard pixel size of 10,000 or more, you will need a new image size of 86-87 in height and 114-116 in width.

Answer 3

You are looking for something like:

 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 4

It is not that difficult.

maxPix = medium ^ 2

maxPix = x * h + x * w

middle ^ 2 = x * h + x * w //: x

average ^ 2 / x = h + w

inverse and multiplied with mean ^ 2

x = average ^ 2 / (h + w)

then multiply h and w with x to get new dimensions

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

Give an image or anything with width and height properties as an argument. The area argument also accepts width and height properties.