用過新浪微博的朋友對它的頭像編輯器都有印象吧.不過人家是用flash做的.
在一個項目中,也用到了同樣的東西,本來想直接用新浪微博的,但它有一部分請求路徑寫到FLASH裡面去了,所以只好放棄.
在網上找到了jquery.Jcrop,基本滿足了我的需求,但它只是簡單的切割而已,還有縮略圖沒有生成.或許有很多人都需要這類東西吧,於是我把它封裝起來了,方便其它朋友直接使用.
官方網址:http://deepliquid.com/content/Jcrop.html
上面有很多demo,有興趣的可以上去看看.
此文章中,封裝的JS如下:
代碼如下:
jQuery.UtrialAvatarCutter = function(config){
var h,w,x,y;
var os,oh,ow;
var api = null;
var sel = this;
var img_content_id = config.content;
var img_id = "img_"+(Math.random()+"").substr(3,8);
var purviews = new Array();
var select_width = null;
var select_height = null;
if(config.purviews){
for(i=0,c=config.purviews.length;i<c;++i){
purviews[purviews.length] = config.purviews[i];
}
}
check_thums_img = function(){
if(config.purviews){
for(i=0,c=config.purviews.length;i<c;++i){
if($('#'+config.purviews[i].id+" img").length==0){
$('#'+config.purviews[i].id).html("<img src='"+os+"'/>");
}else{
$('#'+config.purviews[i].id+" img").attr("src",os);
}
}
}
}
/*
* 重新加載圖片
*/
this.reload = function(img_url){
if(img_url!=null && img_url != ""){
os = img_url+"?"+Math.random();
$("#"+img_content_id).html("<img id='"+img_id+"' src='"+os+"'/>");
$("#"+img_id).bind("load",
function(){
check_thums_img();
sel.init();
}
);
}
}
$("#"+img_content_id+" img").attr("id",img_id);
var preview = function(c) {
if ( c.w == 0 || c.h == 0 ) {
api.setSelect([ x, y, x+w, y+h ]);
api.animateTo([ x, y, x+w, y+h ]);
return;
}
x = c.x;
y = c.y;
w = c.w;
h = c.h;
for(i=0,c=purviews.length;i<c;++i){
var purview = purviews[i];
var rx = purview.width / w;
var ry = purview.height / h;
$('#'+purview.id+" img").css({
width: Math.round(rx * ow) + 'px',
height: Math.round(ry * oh) + 'px',
marginLeft: '-' + Math.round(rx * x) + 'px',
marginTop: '-' + Math.round(ry * y) + 'px'
});
}
}
this.init = function(){
if(api!=null){
api.destroy();
}
os = $("#"+img_content_id+" img").attr("src");
if(os=="")
return;
check_thums_img();
for(i=0,c=purviews.length;i<c;++i){
var purview = purviews[i];
var purview_content = $("#"+purview.id);
purview_content.css({position: "relative", overflow:"hidden", height:purview.height+"px", width:purview.width+"px"});
}
oh = $('#'+img_id).height();
ow = $('#'+img_id).width();
select_width = config.selector.width;
select_height = config.selector.height;
select_width = Math.min(ow,select_width);
select_height = Math.min(oh,select_height);
x = ((ow - select_width) / 2);
y = ((oh - select_height) / 2);
//這是原Jcrop配置,修改此處可修改Jcrop的其它各種功能
api = $.Jcrop('#'+img_id,{
aspectRatio: 1,
onChange: preview,
onSelect: preview
});
//設置選擇框默認位置
api.animateTo([ x, y, x+select_width, y+select_height ]);
}
this.submit = function(){
return {w:w,h:h,x:x,y:y,s:os};
}
}
比較簡單,不再多說
應用部分也非常簡單
1. 導入必需的文件
代碼
代碼如下:
<LINK href="css/jquery.Jcrop.css" type="text/css" rel="Stylesheet" media="screen">
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.Jcrop.min.js"></script>
<script type="text/javascript" src="js/jQuery.UtrialAvatarCutter.js"></script>
2. 定義原始圖片與縮略圖的容器
代碼
代碼如下:
<!--
原始圖
-->
<div id="picture_original">
<img src="http://static.youhuiduo.net/Attatchment/72383/600X600/634030306987187500.jpg"/>
</div>
<!---
縮略圖
-->
<div id="picture_200"></div>
<div id="picture_50"></div>
<div id="picture_30"></div>
3. 配置
代碼
代碼如下:
var cutter = new jQuery.UtrialAvatarCutter(
{
//主圖片所在容器ID
content : "picture_original",
//縮略圖配置,ID:所在容器ID;width,height:縮略圖大小
purviews : [{id:"picture_200",width:200,height:200},{id:"picture_50",width:50,height:50},{id:"picture_30",width:30,height:30}],
//選擇器默認大小
selector : {width:200,height:200}
}
);
4. 觸發
代碼如下:
$(window).load(function(){
cutter.init();
});
5. 如果是使用ajax上傳圖片的,可以使用cutter.reload(imgs_url)即時修改圖片路徑
文件打包下載 http://www.jb51.net/jiaoben/24767.html