jQuery EasyUI 的截圖外掛（imgAreaSelect）用法
阿新 • • 發佈：2019-02-09
目前大多數的SNS網站都有自定義頭像的功能，而自定義頭像又有很多種方法可以實現，比如說大多數網站都在使用Flash截圖，還有就是 Javascript截圖。而如果自己寫一個Javascript截圖功能的話比較複雜，而且對於瀏覽器的相容也不是很好，jQuery就給我們提供了這 樣的外掛——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，選區則會顯示 |
x1y1 |
最初選擇區域的左上角座標 |
x2y2 |
最初選擇區域的右上角座標 |
zIndex |
外掛元素的z-index值，正常情況下imgAreaSelect會自動分配，但有少數情況，有必要將其設定為制定值 |
onInit |
外掛初始化時的回撥函式 |
onSelectStart |
外掛開始選擇時的回撥函式 |
onSelectChange |
外掛改變選區時的回撥函式 |
onSelectEnd |
外掛結束選區時的回撥函式 |