maintaining aspect ratio

Question

I am working on an image cropping tool at the moment, the image crop tool comes from jCrop, what I am trying to is make the image the user takes the crop from smaller than the original uploaded. Basically if uploads a landscape image I need to make the image 304px wide without alterting the aspect ratio of the shot.

For instance if the user uploads a portrait shot, I need make the image 237px without altering the aspect ratio of the shot.

Is this possible? I have access to original images sizes in my code, but I cannot work out make sure I am not altering the aspect ratio?

score 0 · Accepted Answer · answered Aug 30 '12 at 23:18

Yes, it's possible if the source image is already wide enough. If it's not wide enough there isn't enough data to crop and if you wanted to maintain aspect ratio, you'd need to scale the image up before the crop.

Something like this should get you started:

CropWidth=237;
AspectRatio= SourceWidth/SourceHeight; 
CropHeight = CropWidth*AspectRatio;

Parris · Answer 2 · 2012-08-31T00:42:01.353

To properly maintain aspect ratio you should use GCD:

function gcd(a, b) {
    return (b == 0) ? a : gcd(b, a % b);
}

You should then do something like this:

function calcRatio(objectWidth, objectHeight) {
    var ratio = gcd(objectWidth, objectHeight),
        xRatio = objectWidth / ratio,
        yRatio = objectHeight / ratio;
    return  { "x": xRatio, "y": yRatio };
}

This will get you the ratio of some object. You can use this information to figure out how large the resulting image should be.

function findSize (targetHeight, xRatio, yRatio) { 
    var widthCalc = Math.round((xRatio * targetHeight) / yRatio);
    return { "width" : widthCalc, "height" : targetHeight };
} 

var test = calcRatio(1280,720),
    dimensions = findSize(400, test.x, test.y); 
    //400 is what we want the new height of the image to be

Those are your dimensions. If you don't have any extra "space" around your images that you need to account for then your work is done. Otherwise you need to handle a couple cases.

maintaining aspect ratio

2 Answers2