jQuery頭像裁切工具jcrop用法實例(附示範與demo源碼下載)_jquery
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB原創
- 2016-05-16 15:18:471389瀏覽
本文實例講述了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="/static/imghwm/default1.png" data-src="sago.jpg" class="lazy" id="target" alt="Flowers" />
</td>
<td>
<div style="width:100px;height:100px;overflow:hidden;" id="aa">
<img class="jcrop-preview lazy" src="/static/imghwm/default1.png" data-src="sago.jpg" id="preview" alt="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常用外掛及用法總結》
希望本文所述對大家jQuery程式設計有所幫助。
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn