關於ImgAreaSelect, 是一jQuery插件，它支持用戶通過鼠標拖曳選擇圖片的一部分，如圖片拖曳、圖片編輯等~~來具體看一下

1、先下載imgAreaSelect插件

下載地址：

英文：http://odyniec.net/projects/imgareaselect/

中文：http://www.css88.com/EasyTools/javascript/jQueryPlugin/imgAreaSelect/index.html

在頭部引用：

<link rel="stylesheet" type="text/css" href="../jquery.imgareaselect-0.9.10/css/imgareaselect-default.css" /> 
<script type="text/javascript" src="../jquery.imgareaselect-0.9.10/scripts/jquery.imgareaselect.pack.js"></script> 

2、下載的插件裏有三個樣式表

imgareaselect-default.css – 這是默認的樣式表,
imgareaselect-animated.css – 這個樣式與默認的樣式表基本是一樣的，只是它能夠讓選擇區域邊框變化
imgareaselect-deprecated.css – 只有你想使用不贊同的選項時才用這個樣式表。
你只需要在html頭部將其中的一個樣式表添加進來就可以。這css文件夾中還包含４張gif圖片，它們是用來顯示邊框的。

3、元素分布如圖所示

此插件通過創建幾個div元素來表示選擇區域，包括邊框、可調整手柄以及未選擇的區域。這些元素已經指定了特定的類名了，所以你可以通過CSS或者jQuery選擇器來獲得並操作它們。

其中的前綴"imgareaselect"是默認的前綴，可以通過"classPrefix"選項來修改。這在當有許多選擇框需要分別操作（比如修改樣式）的時候特別有用。

4、選項
用戶在這個插件的很多方面都可以進行定制，用戶通過插件選項來達到這個目的（這些選項會在插件初始化的時候起效）。這些選項包括：

5、回調函數

回調函數（當設置onInit, onSelectStart, onSelectChange或 onSelectEnd選項）接收兩個參數，第一個選項是這個插件所應用圖像的引用，另外一個則是呈現當前選擇的對象，這個對象有六個性質。

為了便於理解，下面給出當選擇完後執行的回調函數的例子：

$(‘img#photo‘).imgAreaSelect({

onSelectEnd: function (img, selection) {

alert(‘width: ‘ + selection.width + ‘; height: ‘ + selection.height);

}

});

6、鍵盤支持

如果選項"keys"設置為true,那麽我們能夠通過鍵盤上的按鍵進來選擇框的移動。下面的鍵可以使用，默認的功能如下：

每個屬性通過設置數值（以像素為單位，數值要不小於１），表明當按下此鍵時移動/改變大小多少像素，或者指定其值為"string"來指定它是"resize"模式。例如：

$(‘img#example‘).imgAreaSelect({

keys: { arrows: 15, ctrl: 5, shift: ‘resize‘ }

});

這個例子裏設置成"方向鍵會移動選區15像素，按住Ctrl鍵會移動5像素，而按住Shift鍵時則切換到resize模式"。

如果不止一個圖像，且自己修改了按鍵設置，那麽只對一個圖像會應用這個自定義設置。一般來說，當"激活"（用鼠標點擊）某個圖像時，這個圖像就會使用自定義的按鍵設置。

7、API方法

這個插件也提供了幾個API方法擴展它的應用，並能夠通過這些API方法跟其他web應用聯合起來。

為了使用這些方法，首先需要一個插件對象，可以調用imgAreaSelect()函數並讓其選項"instance"設置為true來實現：

var ias = $(‘#photo‘).imgAreaSelect({ instance: true });

現在就可以使用此對象來調用公共的方法了。例如，設置一個默認預定義的範圍：

ias.setSelection(50, 50, 150, 200, true);

ias.setOptions({ show: true });

ias.update();

只要當初始化完成，就可以使用這些API方法了。下面列出這些API方法：

二、簡單實例

１、寬度或者高度限制

minWidth、minHeight、maxWidth以及maxHeight選項允許你設置選區的範圍。在這個例子中，圖像的最大範圍將限制為200x150px。

$(document).ready(function () {

$(‘#ladybug_ant‘).imgAreaSelect({ maxWidth: 200, maxHeight: 150, handles: true });

});

２、固定高寬比

配置aspectRatio選項就可以了，這裏將其設置成"４：３"：

$(document).ready(function () {

$(‘#bee‘).imgAreaSelect({ aspectRatio: ‘4:3‘, handles: true });

});

３、設置初始選項區域

配置x1, y1, x2與 y2選項就可以了：

$(document).ready(function () {

$(‘#duck‘).imgAreaSelect({ x1: 120, y1: 90, x2: 280, y2: 210 });

});

三、回調函數示例

１、選區預覽

在下面的代碼小片斷裏，onSelectChange()回調函數實現了選擇區域預覽的效果。

官方源代碼：http://odyniec.net/projects/imgareaselect/examples-callback.html

function preview(img, selection) {

var scaleX = 100 / (selection.width || 1);

var scaleY = 100 / (selection.height || 1);

$(‘#ferret + div > img‘).css({

width: Math.round(scaleX * 400) + ‘px‘,

height: Math.round(scaleY * 300) + ‘px‘,

marginLeft: ‘-‘ + Math.round(scaleX * selection.x1) + ‘px‘,

marginTop: ‘-‘ + Math.round(scaleY * selection.y1) + ‘px‘

});

}

//這裏通過jQuery語法在原來圖片後插入同樣的圖片

$(document).ready(function () {

$(‘<div><img src="ferret.jpg" style="position: relative;" /><div>‘)

.css({

float: ‘left‘,

position: ‘relative‘,

overflow: ‘hidden‘,

width: ‘100px‘,

height: ‘100px‘

})

.insertAfter($(‘#ferret‘));

$(‘#ferret‘).imgAreaSelect({ aspectRatio: ‘1:1‘, onSelectChange: preview });

});

由於預覽窗口是100x100px的，因此當截圖窗口小於100px時，預覽圖會放大；當截圖窗口大於100px時，預覽圖會縮小。這兩種效果圖如下：

截圖 1　當截圖窗口大於100px時

截圖 2　當截圖窗口小於100px時

需要說明的是，這裏制作這種效果使用了一種技巧。最關鍵的一個是等比率縮放.它需要兩個圖片，第一圖是原圖，第二個圖是選擇區域後顯示的圖，用第一個圖上的選擇坐標+css控制產生第二個圖，實際上兩個圖是一樣的，只不過通過css控制了第二張圖的顯示區域與縮放比率。證據如下：

【證據一】在$(document).ready()函數中通過insertAfter插入"src"也是"ferret.jpg"的圖片。再註意一下，這一段裏的"overflow: ‘hidden‘,"這一行代碼就是讓超過100px高寬的圖片額外內容隱藏掉。

【證據二】在preview()函數中，首先就定義了scaleX與scaleY，它們的內容就是100/selection.width(或height) ，也就是當selection.width小於100時，這個因子起放大作用，反之起縮小作用。

值得註意的是：

回調函數中實際圖的寬高（這裏的300,400是實際圖的高，要根據實際情況調整！）,回調函數中新圖的寬高這些參數必須設置正確、否則會出現 選擇偏差

２、提交選區的坐標

如果需要實現真正截圖功能必須使用服務器端支持，例如php asp aspx jsp。也就是意味著，在客戶端選擇只是第一步，如果需進一步的處理，必須要將這選區的坐標提交給服務器。那麽如何實現呢？

創建一個表彰，裏面有四個隱藏域：

<form action="crop.php" method="post">

<input type="hidden" name="x1" value="" />

<input type="hidden" name="y1" value="" />

<input type="hidden" name="x2" value="" />

<input type="hidden" name="y2" value="" />

<input type="submit" name="submit" value="Submit" />

</form>

然後在初始化imgAreaSelect時，使用onSelectEnd()回調函數將選擇後的數據賦給這些隱藏域，正如下面代碼那樣：

$(document).ready(function () {

$(‘#ladybug‘).imgAreaSelect({

onSelectEnd: function (img, selection) {

$(‘input[name="x1"]‘).val(selection.x1);

$(‘input[name="y1"]‘).val(selection.y1);

$(‘input[name="x2"]‘).val(selection.x2);

$(‘input[name="y2"]‘).val(selection.y2);

}

});

});

這樣當點擊"submit按鈕"時，頁面將上載到服務器，如果使用PHP的話，使用$_POST[‘x1‘]等就得到相應的坐標數據了。

素材源於腳本之家~~~

關於jQuery插件imgAreaSelect基礎講解