jQuery imgAreaSelect使用宽高比设置初始选择

我正在使用jQuery和imgAreaSelect插件。 我正在使用区域选择插件，以便用户在上传之前可以将图像裁剪为16：9的宽高比。

我想显示初始裁剪选择，以便在选择文件时加载缩略图，并使用imgAreaSelect选择最大可能的16：9选择。 我有缩略图加载等但只是无法获得宽高比部分。 这是我到目前为止：

// 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(){ // set initial crop at 16:9 aspect ratio, calculate coordinates // @todo $( this ).imgAreaSelect({ x1 : 0, y1 : 0, x2 : this.width, y2 : this.height }); }); } 

对此有任何帮助表示赞赏！ 谢谢

Answer 1

这对我有用：

 // 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:9 var 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 instead var 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 ); }); } 

Answer 2

只需添加以下代码即可调用初始裁剪选择

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

Answer 3

 function addImgAreaSelect( 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 ); }); }