Javascript solution to calculate image ratio to fit given square footage

Question

OK, I am working on a project where a viewer can upload an image, and my client wants to offer three defined sizes all based on square footage.

So, if a viewer loads up a 5000 x 3000 px image, we want to know the size it would be that comes to say 24 square feet, within an inch or two. It could be a 18811 x 3036.

I have scratched my brains and what little hair I have left trying to come up with the formula. Found nothing searching, but, I have seen this done on sites, so I know it is feasible.

I tried using formula to get common denominator but, it is not always pretty like 16:9 or 4:3. It could be 2375:1890 or worse.

Anyone with ideas? REALLY would appreciate it.

Thanks

I'm confused about what you're trying to accomplish. Are you just trying to resize an image proportionally? — Chris Riebschlager, Feb 19 '18 at 18:16
If you are trying to resize it to certain standard aspect ratios, then it would be most beneficial to store an explicit enumeration of the possible aspect ratios you should be testing for. Otherwise it's very unclear as to the limitations of "pretty" you are looking for, as that's not an objective criteria. Also, JavaScript has no concept of "square feet". You need to specify limitations in pixels and then convert that using a desired pixel density into real-world units of length. — Patrick Roberts, Feb 19 '18 at 18:26
Here is an example of what I am trying to accomplish: https://www.muralsyourway.com/p/create-your-own-mural/ — WebDude0482, Feb 19 '18 at 22:11
There, you load up an image, and it suggests 3 sizes, based on your image, and if you notice, they come to certain sq footage, 24,48, 96 sq ft. It could be any sort of aspect ratio, depends on the photo. Consider a panorama, a 4 x 5" negative, digital camera, etc. I ties it with a pano which had a ratio of 12:1 and it measured it correctly, 12' x 2' for the small. Hope this helps, thanks. — WebDude0482, Feb 19 '18 at 22:16

score 0 · Answer 1 · answered Feb 25 '18 at 16:46

I figured out the formula to suggest sizes to fit within a given square footage, by realizing what I needed is to find the resolution that would provide me the desired size from a given image.

square root( (pixelWidth x pixelLength) / (desiredSquareFootage x 144) ) = resolution

pixelWidth x resolution = width (in inches) pixelLength x resolution = length (in Inches)

From here, it is just a bit of javascript to make it work in an application. As an example;

    var imgWidth = response.width; // the image width from a javascript response from another app
    var imgHeight = response.height // the image height from a javascript response from another app
    var sqInFt = 144; // square inches in a square foot
    var smallSqFt = 24; // desired sq footage for our small suggestion

// These two lines now deliver the resolution needed
    var bSmall = imgWidth*imgHeight/(smallSqFt*sqInFt);
    var resSmall = Math.sqrt(bSmall);

//Now, we can apply the resolution to the file dimensions
    var smallPrintWidth = Math.floor(imgWidth/resSmall); // the width dimension for the suggested size
    var smallPrintHeight = Math.floor(imgHeight/resSmall); // the height dimension for the suggested size

score 0 · Answer 2 · answered Oct 13 '18 at 12:51

var imgWidth = 150;   
var imgHeight = 100;
var boundBoxSize = 100;
var ret = {};
if(imgWidth>imgHeight){
          var ratio = imgHeight/imgWidth;
          ret['nheight'] = boundBoxSize*ratio;
          ret['nwidth'] = boundBoxSize;
  }else if(imgWidth<imgHeight){
          var ratio = imgWidth/imgHeight;
          ret['nheight'] = boundBoxSize;
          ret['nwidth'] = boundBoxSize*ratio;
  }else{
        ret['nheight'] = boundBoxSize;
        ret['nwidth'] = boundBoxSize;
  }
  document.write(ret.nwidth+'--'+ret.nheight)

Javascript solution to calculate image ratio to fit given square footage

2 Answers2