Jquery Imgareaselect Set Initial Selection With Aspect Ratio

I'm using jQuery and the imgAreaSelect plugin. I am using the area select plugin so that users can crop their images to 16:9 aspect ratio before they upload. I want to display an i

Solution 1:

this works for me:

// adds an image area select instance
function addImgAreaSelect( img ){
        img.addClass( 'imgAreaSelect' ).imgAreaSelect({
                handles : true,
                aspectRatio : '16:9',
                fadeSpeed : 1,
                show : true
        });
        img.load(function(){ // display initial image selection 16:9var height = ( this.width / 16 ) * 9;
                    if( height <= this.height ){     
                            var diff = ( this.height - height ) / 2;
                            var coords = { x1 : 0, y1 : diff, x2 : this.width, y2 : height + diff };
                    }   
                    else{ // if new height out of bounds, scale width insteadvar width = ( this.height / 9 ) * 16; 
                            var diff = ( this.width - width ) / 2;
                            var coords = { x1 : diff, y1 : 0, x2 : width + diff, y2: this.height };
                    }   
                $( this ).imgAreaSelect( coords );
        });
}

Solution 2:

Just invoke the initial crop selection by adding below code

$('#thumbnail').imgAreaSelect({x1 :0,y1 :0,x2 :180,y2:180,aspectRatio:'1:1',handles:true,onSelectChange:preview});

Solution 3:

functionaddImgAreaSelect( img ){
        img.addClass( 'imgAreaSelect' ).imgAreaSelect({
                handles : true,
                aspectRatio : '16:9',
                fadeSpeed : 1,
                show : true
        });
        img.load(function(){
                var ratio = 19/9;
                var originalH = originalImg.height;
                var originalW = originalImg.width;
                var size =  Math.min(thumb.width()/ratio, thumb.height());
                var xBiggerThanY = thumb.width()/ratio > thumb.height();
                var fullSize = Math.max(thumb.width()/ratio, thumb.height());
                var sizeX1 = xBiggerThanY ? (fullSize - size) * ratio / 2 : 0;
                var sizeX2 = xBiggerThanY ? size*ratio-1 + (fullSize - size) * ratio / 2 : size*ratio-1;
                var sizeY1 = xBiggerThanY ? 0 : (fullSize - size) / 2;
                var sizeY2 = xBiggerThanY ? size - 1 : size - 1 + (fullSize - size) / 2;

                var initSelection = {x1: sizeX1, y1: sizeY1, x2: sizeX2, y2: sizeY2};
                $( this ).imgAreaSelect( initSelection );
        });
}