一枚基于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" target="_blank" rel="external nofollow"  />
<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	插件結束選區時的回調函數