jQuery头像裁剪工具jcrop用法实例(附演示与demo源码下载)
本文实例讲述了jQuery头像裁剪工具jcrop用法。分享给大家供大家参考，具体如下：
头像裁剪工具目前比较流行的是flash和jquery的。个人觉得用jquery的比较好，因为代码仔细研究一下，基本上能明白怎么回事，想改的话也比较容易。
有一个例子，请参考：jcrop例子demo，是根jcrop的例子改的，添加以下二个特点：
1，居中显示，并且可拖拉，改变截取的大小
2，预览的图片，根拖拉的大小成比例。
以下是js代码，作了简单的封装
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-type"content="text/html;charset=UTF-8"/>
<title>jcrop图片拖动</title>
<scriptsrc="jquery.min.js"type="text/javascript"></script>
<scriptsrc="jquery.Jcrop.min.js"type="text/javascript"></script>
<linkrel="stylesheet"href="jquery.Jcrop.css"type="text/css"/>
<linkrel="stylesheet"href="demos.css"type="text/css"/>
</head>
<body>
<divid="outer">
<divclass="jcExample">
<divclass="article">
<h1>上传头像拖动例子</h1>
<table>
<tr>
<td>
<imgsrc="sago.jpg"id="target"alt="Flowers"/>
</td>
<td>
<divstyle="width:100px;height:100px;overflow:hidden;"id="aa">
<imgsrc="sago.jpg"id="preview"alt="Preview"class="jcrop-preview"/>
</div>
</td>
</tr>
</table>
</div>
</div>
</div>
</body>
<scripttype="text/javascript">
newcutImage().init();
functioncutImage(){
varoop=this;
this.option={
x:170,
y:110,
w:350,
h:200,
t:'target',
p:'preview',
o:'aa'
}
this.init=function(){
oop.target();
}
this.target=function(){
$('#'+oop.option['t']).Jcrop({
onChange:oop.updatePreview,
onSelect:oop.updatePreview,
aspectRatio:1,
setSelect:[oop.option['x'],oop.option['y'],oop.option['w'],oop.option['h']],
bgFade:true,
bgOpacity:.5
});
}
this.updatePreview=function(obj){
if(parseInt(obj.w)>0)
{
varrx=$('#'+oop.option['o']).width()/obj.w;
varry=$('#'+oop.option['o']).height()/obj.h;
$('#'+oop.option['p']).css({
width:Math.round(rx*$('#'+oop.option['t']).width())+'px',
height:Math.round(ry*$('#'+oop.option['t']).height())+'px',
marginLeft:'-'+Math.round(rx*obj.x)+'px',
marginTop:'-'+Math.round(ry*obj.y)+'px'
});
}
}
}
</script>
</html>
jqueryjcrop结合jqueryajaxupload的话，可以使头像上传截取功能，很人性化。
完整实例代码点击此处本站下载。
更多关于jQuery插件相关内容感兴趣的读者可查看本站专题：《jQuery常用插件及用法总结》
希望本文所述对大家jQuery程序设计有所帮助。