Posted in Javascript onJanuary 22, 2016
本文实例讲述了jQuery头像裁剪工具jcrop用法。分享给大家供大家参考，具体如下：
头像裁剪工具目前比较流行的是flash和jquery的。个人觉得用jquery的比较好，因为代码仔细研究一下，基本上能明白怎么回事，想改的话也比较容易。
有一个例子，请参考：jcrop例子demo ，是根jcrop的例子改的，添加以下二个特点：
1，居中显示，并且可拖拉，改变截取的大小
2，预览的图片，根拖拉的大小成比例。
以下是js代码，作了简单的封装
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<title>jcrop 图片拖动</title>
<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.Jcrop.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="jquery.Jcrop.css" type="text/css" />
<link rel="stylesheet" href="demos.css" type="text/css" />
</head>
<body>
<div id="outer">
<div class="jcExample">
<div class="article">
<h1>上传头像拖动例子</h1>
<table>
<tr>
<td>
<img src="sago.jpg" id="target" alt="Flowers" />
</td>
<td>
<div style="width:100px;height:100px;overflow:hidden;" id="aa">
<img src="sago.jpg" id="preview" alt="Preview" class="jcrop-preview" />
</div>
</td>
</tr>
</table>
</div>
</div>
</div>
</body>
<script type="text/javascript">
new cutImage().init();
function cutImage(){
var oop = 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)
{
var rx = $('#'+oop.option['o']).width()/ obj.w;
var ry = $('#'+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>
jquery jcrop结合jquery ajax upload的话，可以使头像上传截取功能，很人性化。
完整实例代码点击此处本站下载。
希望本文所述对大家jQuery程序设计有所帮助。
jQuery头像裁剪工具jcrop用法实例(附演示与demo源码下载)
- Author -
张映声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@