Question

I have 3 different divs with images in them. Each div with a different width and height.
I am using jQuery imgAreaSelect on them all. Cropping works fine.
My problem is i would like when the cropping window opens to start with an initial crop.
I would like this initial crop to be the biggest possible porportions for the given aspect ratio.

The code I am working with is:

var aspectratio1 = $('#cutout_'+cutout_id).height() / $('#cutout_'+cutout_id).width();
aspectratio = "1:" + aspectratio1;
var image_width = $('#CutoutImage').width();
var image_height = $('#CutoutImage').height();
var aspect = 1 / aspectratio1 ;
var NewWidth = Math.round(image_height * aspect);
var left = ((image_width - NewWidth) / 2);
var right = Math.round(NewWidth + left);
var x1 = left;
var y1 = 0;
var x2 = right;
var y2 = image_height;

$('#CutoutImage').imgAreaSelect({
    aspectRatio: aspectratio,
    instance: true,
    zIndex: 9999,
    x1: x1,
    y1: y1,
    x2: x2, 
    y2: y2
});

This seems to not be working properly. Any help or insight is much appreciated.

Thank you very much

Answer 1

Well this works good for me

var aspectratio_cutout = ratio_hw;
aspectratio = "1:" + mycutout.ratio_hw;

var image_width = $('#imageToCutout').width();
var image_height = $('#imageToCutout').height();
var image_ratio_hw = image_height / image_width;
var image_ratio_wh = image_width / image_height;

if (mycutout.ratio_hw <= ratio_hw) {
    var cropwidth = image_width;
    var cropheight = cropwidth * ratio_hw;
    var x1 = 0;
    var y1 = (image_height - cropheight) / 2;
} else {
    var cropheight = image_height;
    var cropwidth = cropheight * ratio_wh;
    var x1 = (image_width - cropwidth) / 2;
    var y1 = 0;0;                                                           

}

var x2 = x1 + cropwidth ;
var y2 = y1 + cropheight;