目前大多數的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 方法有很多參數可以定義：
| 參數 | 描述 |
|---|---|
| 設定選取區域的顯示比率，如：” |
| 如果設定為true，當選擇區域選擇結束時消失，預設值為：false |
| 這是一個字元串，表示插件樣式的類名加字首，預設值為 |
| 如果設定為true，禁用插件 |
| 如果設定為true，插件被重新啟用 |
| 如果設定為大于零的數字，則用優美的淡入/淡出動畫來顯示圖檔，預設值為 false |
| 如果設定為true，調整搖桿則會顯示在選擇區域内，如果設定為 |
| 如果設定為true，選擇範圍是隐藏 |
| 圖檔的真實高度 (if scaled with the CSS |
| 真實圖檔寬度 (if scaled with the CSS |
| 如果設定為true，imgAreaSelect() 調用傳回一個imgAreaSelect綁定到的圖像的執行個體，使您可以使用它的API方法 |
| 啟用/禁用鍵盤支援，預設值為false |
| 選取的最大高度（機關為像素） |
| 選取的最大寬度（機關為像素） |
| 選取的最小高度（機關為像素） |
| 選取的最小寬度（機關為像素） |
| 确定選取是否可以移動，預設值為true |
| 一個jQuery對象或選擇字元串，指定被追加到父元素，預設值為 |
| 如果設定為true，選擇區以外的點選将不會啟動一個新的選區（即使用者将隻能移動/調整現有的選擇範圍），預設值為false |
| 确定是否選擇面積應可調整大小，預設值為true |
| 如果設定為true，選區則會顯示 |
| 最初選擇區域的左上角坐标 |
| 最初選擇區域的右上角坐标 |
| 插件元素的z-index值，正常情況下imgAreaSelect會自動配置設定，但有少數情況，有必要将其設定為制定值 |
| 插件初始化時的回調函數 |
| 插件開始選擇時的回調函數 |
| 插件改變選區時的回調函數 |
| 插件結束選區時的回調函數 |
以上是翻譯以後的描述，讀者也可以浏覽原始文檔：
http://odyniec.net/projects/imgareaselect/usage.html
![nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)