jQuery imgAreaSelect使用宽高比设置初始选择 [英] jQuery imgAreaSelect set initial selection with aspect ratio
本文介绍了jQuery imgAreaSelect使用宽高比设置初始选择的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在使用jQuery和imgAreaSelect插件.我正在使用区域选择插件,以便用户可以在上传之前将其图片裁剪为16:9的宽高比.
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.
我想显示一个初始的裁切选择,以便当他们选择文件时,将加载缩略图,并使用imgAreaSelect选择最大的16:9选择.我有缩略图加载等,但无法获得宽高比部分.这是我到目前为止的内容:
I want to display an initial crop selection so that when they select the file, a thumbnail loads and the biggest possible 16:9 selection is selected with imgAreaSelect. I have the thumbnail loading etc but just cant get the aspect ratio part. This is what I have so far:
// 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 });
});
}
任何对此的帮助,我们将不胜感激!谢谢
Any help with this is appreciated! Thanks
推荐答案
这对我有用:
// 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 );
});
}
这篇关于jQuery imgAreaSelect使用宽高比设置初始选择的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文