在诸多sns网站中都用到了头像截取功能,最近在做一个类SNS社区项目的时候,正好需要用到这个功能,自己写一个纯javascript的吧,很麻烦(主要是自己javascript很菜),于是在众多jQuery插件中挑选了这枚imgareaselect,使用起来还是很方便的,在截取完成后返回四角坐标和高宽交给后台开发人员就可以了。
先把这枚imgareaselect插件从官网下载http://odyniec.net/projects/imgareaselect/jquery.imgareaselect-0.9.3.zip
完成后载入文件,注意css文件、图片、js文件的层级关系,当然你也可以自己修改路径。
<link rel="stylesheet" type="text/css" href="css/imgareaselect-default.css" target="_blank" rel="external nofollow" />
<script type="text/javascript" src="scripts/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery.imgareaselect.pack.js"></script>
看下简单的html代码:
<div class="" style="width:700px">
<img src="flower2.jpg" id="photo"/>
<div id="preview" style="width: 100px; height: 100px; overflow: hidden; float:right">
<img src="flower2.jpg" style="width: 100px; height: 100px;">
</div>
<form>
<fieldset>
<legend>头像截取返回的一些值</legend>
x1:<input type="text" id="x1" value="-"><br />
y1:<input type="text" id="y1" value="-"><br />
x2:<input type="text" id="x2" value="-"><br />
y2:<input type="text" id="y2" value="-"><br />
高:<input type="text" value="-" id="h"><br />
宽:<input type="text" value="-" id="w">
</fieldset>
</form>
</div>
自定义一个函数preview,方便返回坐标及宽高值。代码如下:
function preview(img, selection) {
if (!selection.width || !selection.height)
return;
var scaleX = 100 / selection.width;
var scaleY = 100 / selection.height;
$('#preview img').css({
width: Math.round(scaleX * 300),
height: Math.round(scaleY * 300),
marginLeft: -Math.round(scaleX * selection.x1),
marginTop: -Math.round(scaleY * selection.y1)
});
$('#x1').val(selection.x1);
$('#y1').val(selection.y1);
$('#x2').val(selection.x2);
$('#y2').val(selection.y2);
$('#w').val(selection.width);
$('#h').val(selection.height);
}
调用imgAreaSelect方法来激活选中区域:
$(function(){
$('#photo').imgAreaSelect({
aspectRatio: '1:1', //设置缩放比例
handles: true, //显示手型
fadeSpeed: 200,
onSelectChange: preview //选区改变后返回函数
});
})
附上imgAreaSelect 法的参数列表:
参数 | 描述 |
---|---|
aspectRatio | 设定选取区域的显示比率,如:”4:3″ |
autoHide | 如果设置为true,当选择区域选择结束时消失,默认值为:false |
classPrefix | 这是一个字符串,表示插件样式的类名加前缀,默认值为”imgareaselect” |
disable | 如果设置为true,禁用插件 |
enable | 如果设置为true,插件被重新启用 |
fadeSpeed | 如果设置为大于零的数字,则用优美的淡入/淡出动画来显示图片,默认值为 false |
handles | 如果设置为true,调整手柄则会显示在选择区域内,如果设置为”corners”,则只有角处理会显示调整手柄,默认值为false |
hide | 如果设置为true,选择范围是隐藏 |
imageHeight | 图片的真实高度 (if scaled with the CSS width and height properties) |
imageWidth | 真实图片宽度 (if scaled with the CSS width and height properties) |
instance | 如果设置为true,imgAreaSelect() 调用返回一个imgAreaSelect绑定到的图像的实例,使您可以使用它的API方法 |
keys | 启用/禁用键盘支持,默认值为false |
maxHeight | 选取的最大高度(单位为像素) |
maxWidth | 选取的最大宽度(单位为像素) |
minHeight | 选取的最小高度(单位为像素) |
minWidth | 选取的最小宽度(单位为像素) |
movable | 确定选取是否可以移动,默认值为true |
parent | 一个jQuery对象或选择字符串,指定被追加到父元素,默认值为”body” |
persistent | 如果设置为true,选择区以外的点击将不会启动一个新的选区(即用户将只能移动/调整现有的选择范围),默认值为false |
resizable | 确定是否选择面积应可调整大小,默认值为true |
show | 如果设置为true,选区则会显示 |
x1 y1 | 最初选择区域的左上角坐标 |
x2 y2 | 最初选择区域的右上角坐标 |
zIndex | 插件元素的z-index值,正常情况下imgAreaSelect会自动分配,但有少数情况,有必要将其设置为制定值 |
onInit | 插件初始化时的回调函数 |
onSelectStart | 插件开始选择时的回调函数 |
onSelectChange | 插件改变选区时的回调函数 |
onSelectEnd | 插件结束选区时的回调函数 |