一枚基于jQuery的头像截取插件imgareaselect

在诸多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" />
<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	插件结束选区时的回调函数

评论

3 楼 128340haha 2013-07-08  

这里只是一个前台的 图片裁剪与预览~！
要截图的成品 用得到的参数去程序端处理~！
还有就是模板是以300*300的图片来处理的~！
如果是其他规格的图片,更改 
$('#preview img').css({ 
        width: Math.round(scaleX * 300), 
        height: Math.round(scaleY * 300), 

    }); 
这2个300为图片实际大小~！

感谢博主的分享，很好用~！

2 楼 Shmily奕蝶 2012-02-20  

指教一下，我按你说的弄了，可怎么还是截不了图啊，这是哪里的原因呢？？

1 楼 snake13456 2011-09-05  

小图的定位不够准确，要自行修改一下