目前大多數(shù)的SNS網(wǎng)站都有自定義頭像的功能，而自定義頭像又有很多種方法可以實(shí)現(xiàn)，比如說(shuō)大多數(shù)網(wǎng)站都在使用Flash截圖，還有就是 Javascript截圖。而如果自己寫一個(gè)Javascript截圖功能的話比較復(fù)雜，而且對(duì)于瀏覽器的兼容也不是很好，jQuery就給我們提供了這 樣的插件——imgAreaSelect
官方網(wǎng)站：http://odyniec.net/projects/imgareaselect/
這里介紹一下快速使用這個(gè)插件的方法：
首先在官方網(wǎng)站下載這個(gè)插件（http://odyniec.net/projects/imgareaselect/jquery.imgareaselect-0.9.1.zip），目前版本是0.9.1，在下載的插件中會(huì)有scripts 和CSS文件夾，scripts文件夾會(huì)包含jQuery文件和imgareaSelect文件，CSS文件夾則提供一些默認(rèn)的樣式和一些生動(dòng)的樣式，這個(gè)用戶可以自己選擇使用哪一種方式。
準(zhǔn)備工作完成后，我們可以建立一個(gè)HTML 頁(yè)面，在頁(yè)面的<head>之間加入下面的代碼：
<head>
…
<link rel=”stylesheet” type=”text/css” href=”css/imgareaselect-default.css” />
<script type=”text/javascript” src=”scripts/jquery.min.js”></script>
<script type=”text/javascript” src=”scripts/jquery.imgareaselect.pack.js”></script>
…
</head>
然后調(diào)用imgAreaSelect 方法來(lái)激活圖片的選中區(qū)域
<script type=”text/javascript”>
$(document).ready(function () {
$(‘img#photo’).imgAreaSelect({ handles: true, onSelectEnd: someFunction });
});
</script>
imgAreaSelect 方法有很多參數(shù)可以定義：
參數(shù) |
描述 |
|---|
aspectRatio |
設(shè)定選取區(qū)域的顯示比率，如：”4:3“
|
autoHide |
如果設(shè)置為true，當(dāng)選擇區(qū)域選擇結(jié)束時(shí)消失，默認(rèn)值為：false |
classPrefix |
這是一個(gè)字符串，表示插件樣式的類名加前綴，默認(rèn)值為"imgareaselect" |
disable |
如果設(shè)置為true，禁用插件 |
enable |
如果設(shè)置為true，插件被重新啟用 |
fadeSpeed |
如果設(shè)置為大于零的數(shù)字，則用優(yōu)美的淡入/淡出動(dòng)畫來(lái)顯示圖片，默認(rèn)值為 false |
handles |
如果設(shè)置為true，調(diào)整手柄則會(huì)顯示在選擇區(qū)域內(nèi)，如果設(shè)置為"corners"，則只有角處理會(huì)顯示調(diào)整手柄，默認(rèn)值為false |
hide |
如果設(shè)置為true，選擇范圍是隱藏 |
imageHeight |
圖片的真實(shí)高度 (if scaled with the CSSwidthandheightproperties) |
imageWidth |
真實(shí)圖片寬度 (if scaled with the CSSwidthandheightproperties) |
instance |
如果設(shè)置為true，imgAreaSelect() 調(diào)用返回一個(gè)imgAreaSelect綁定到的圖像的實(shí)例，使您可以使用它的API方法 |
keys |
啟用/禁用鍵盤支持，默認(rèn)值為false |
maxHeight |
選取的最大高度（單位為像素） |
maxWidth |
選取的最大寬度（單位為像素） |
minHeight |
選取的最小高度（單位為像素） |
minWidth |
選取的最小寬度（單位為像素） |
movable |
確定選取是否可以移動(dòng)，默認(rèn)值為true
|
parent |
一個(gè)jQuery對(duì)象或選擇字符串，指定被追加到父元素，默認(rèn)值為"body"
|
persistent |
如果設(shè)置為true，選擇區(qū)以外的點(diǎn)擊將不會(huì)啟動(dòng)一個(gè)新的選區(qū)（即用戶將只能移動(dòng)/調(diào)整現(xiàn)有的選擇范圍），默認(rèn)值為false |
resizable |
確定是否選擇面積應(yīng)可調(diào)整大小，默認(rèn)值為true
|
show |
如果設(shè)置為true，選區(qū)則會(huì)顯示 |
x1
y1 |
最初選擇區(qū)域的左上角坐標(biāo) |
x2
y2 |
最初選擇區(qū)域的右上角坐標(biāo) |
zIndex |
插件元素的z-index值，正常情況下imgAreaSelect會(huì)自動(dòng)分配，但有少數(shù)情況，有必要將其設(shè)置為制定值 |
onInit |
插件初始化時(shí)的回調(diào)函數(shù) |
onSelectStart |
插件開(kāi)始選擇時(shí)的回調(diào)函數(shù) |
onSelectChange |
插件改變選區(qū)時(shí)的回調(diào)函數(shù) |
onSelectEnd |
插件結(jié)束選區(qū)時(shí)的回調(diào)函數(shù) |
以上是翻譯以后的描述，讀者也可以瀏覽原始文檔：
http://odyniec.net/projects/imgareaselect/usage.html
該文章在 2012/3/12 9:43:13 編輯過(guò)
400 186 1886
