目前大多數的SNS網站都有自定義頭像的功能，而自定義頭像又有很多種方法可以實現，比如說大多數網站都在使用Flash截圖，還有就是 Javascript截圖。而如果自己寫一個Javascript截圖功能的話比較復雜，而且對于瀏覽器的兼容也不是很好，jQuery就給我們提供了這 樣的插件——imgAreaSelect
官方網站：http://odyniec.net/projects/imgareaselect/
這里介紹一下快速使用這個插件的方法：
首先在官方網站下載這個插件（http://odyniec.net/projects/imgareaselect/jquery.imgareaselect-0.9.1.zip），目前版本是0.9.1，在下載的插件中會有scripts 和CSS文件夾，scripts文件夾會包含jQuery文件和imgareaSelect文件，CSS文件夾則提供一些默認的樣式和一些生動的樣式，這個用戶可以自己選擇使用哪一種方式。
準備工作完成后，我們可以建立一個HTML 頁面，在頁面的<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>
然后調用imgAreaSelect 方法來激活圖片的選中區域
<script type=”text/javascript”>
$(document).ready(function () {
$(‘img#photo’).imgAreaSelect({ handles: true, onSelectEnd: someFunction });
});
</script>
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 CSSwidthandheightproperties) |
imageWidth |
真實圖片寬度 (if scaled with the CSSwidthandheightproperties) |
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 |
插件結束選區時的回調函數 |
以上是翻譯以后的描述，讀者也可以瀏覽原始文檔：
http://odyniec.net/projects/imgareaselect/usage.html
該文章在 2012/3/12 9:43:13 編輯過
400 186 1886
