一、技術(shù)文檔
１、介紹
ImgAreaSelect是一jQuery插件，它支持用戶通過鼠標(biāo)拖曳選擇圖片的一部分，非常的fashion。另外，可以在這個選擇圖像區(qū)域的基礎(chǔ)上應(yīng)用網(wǎng)站的其他一些技術(shù)，比如圖片拖曳、圖片編輯等。
２、基本用法
這個插件基于jQuery上通過imgAreaSelect()方法來調(diào)用，它操作的對象是HTML中<img>元素內(nèi)的圖像。

如果在jQuery對象里有不止有一個img元素，那么這個插件會對里面的元素逐個應(yīng)用此方法。其實這個方法不僅僅應(yīng)用于img元素，它支持任何塊級元素（比如有圖像背景的div元素）。
與其它jQuery插件相似，這個插件可以在$(document).ready() 或者 $(window).load()句柄中初始化。
３、選項
用戶在這個插件的很多方面都可以進(jìn)行定制，用戶通過插件選項來達(dá)到這個目的（這些選項會在插件初始化的時候起效）。這些選項包括：

選項	描述
aspectRatio	長寬比，以后在選擇時候就會維持不變。 e.g. "4:3"
autoHide	如果設(shè)為true，那么在選擇完后區(qū)域會消失。 Default:false
classPrefix	預(yù)先給插件元素的前綴（詳見下面：５、元素與類） Default:imgareaselect
disable	如果設(shè)置成true，這個插件將不起作用（但是圖像還是可見的）
enable	如果設(shè)置成true，這個插件又將重新起作用
fadeSpeed	若設(shè)置成大于零的某個數(shù)，將"漸隱/漸現(xiàn)"這個插件 Default:true
handles	若設(shè)置成true，在改變大小的時候顯示改變框（就是角點有些小"矩形"） Default:false
hide	若設(shè)置成true，則隱藏選擇框
imageHeight	圖像的真實高度（因為有可能被CSS縮放過了）
imageWidth	圖像的真實寬度（因為有可能被CSS綻放過了）
instance	若設(shè)為true，imgAreaSelect()函數(shù)會返回一個對選擇區(qū)域圖像的一個引用，以便能夠進(jìn)一步使用API。（詳見８、API方法）
keys	啟用/關(guān)閉鍵盤支持（詳見７、鍵盤支持） Default:false
maxHeight	限制選擇框（以像素為單位），設(shè)置最大、最小的高度、寬度。
maxWidth
minHeight
minWidth
movable	設(shè)置是否支持選擇框移動 Default:true
parent	指定此插件默認(rèn)所附加到的父元素 Default:body
persistent	若設(shè)置成true，點擊選擇區(qū)域外將開始一個新的選項（換言之，是否讓用戶只能移動/縮放選擇區(qū)域） Default:false
remove	若設(shè)置成true，則該插件將完全移除
resizable	決定選擇區(qū)域是否可以改變大小 Default:true
resizeMargin	當(dāng)選擇區(qū)域?qū)挾瘸^多少像素時將啟用"可改變大小"模式
show	如果設(shè)置成true，選擇區(qū)域?qū)⒖梢?/SPAN>
x1 y1	初始化時選擇框左上角的坐標(biāo)
x2 y2	初始化時選擇框右下角的坐標(biāo)
zIndex	設(shè)置此插件所作用元素的z-index的值，一般情況下，imgAreaSelect 總是可以自動計算出它的值，但是極少數(shù)情況下還是有必要設(shè)置的。
onInit	當(dāng)插件初始化時所調(diào)用的函數(shù)（詳見６、回調(diào)函數(shù)）
onSelectStart	當(dāng)開始選擇時所調(diào)用的函數(shù)（詳見６、回調(diào)函數(shù)）
onSelectChange	當(dāng)改變選擇區(qū)域時所調(diào)用的函數(shù)（詳見６、回調(diào)函數(shù)）
onSelectEnd	當(dāng)選擇結(jié)束時所調(diào)用的函數(shù)（詳見６、回調(diào)函數(shù)）

４、樣式表
隨著插件發(fā)放的還有三個樣式表：

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

５、元素與類
此插件通過創(chuàng)建幾個div元素來表示選擇區(qū)域，包括邊框、可調(diào)整手柄以及未選擇的區(qū)域。這些元素已經(jīng)指定了特定的類名了，所以你可以通過CSS或者jQuery選擇器來獲得并操作它們。

類名	指定給的對象
imgareaselect-selection	選擇的區(qū)域
imgareaselect-border1 imgareaselect-border2 imgareaselect-border3 imgareaselect-border4	選擇區(qū)域的四個邊框，由四個div組成的
imgareaselect-handle	可改變大小的調(diào)整手柄（四個或者八個divs，如果沒有使能的話，則不顯示）
imgareaselect-outer	未選擇區(qū)域，由四個divs組成

下面的對象示意圖展示了這插件的這些元素如何布置的：

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

６、回調(diào)函數(shù)

回調(diào)函數(shù)（當(dāng)設(shè)置onInit, onSelectStart, onSelectChange或 onSelectEnd選項）接收兩個參數(shù)，第一個選項是這個插件所應(yīng)用圖像的引用，另外一個則是呈現(xiàn)當(dāng)前選擇的對象，這個對象有六個性質(zhì)。

為了便于理解，下面給出當(dāng)選擇完后執(zhí)行的回調(diào)函數(shù)的例子：

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

onSelectEnd: function (img, selection) {

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

}

});

７、鍵盤支持

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

當(dāng)然你也可以自己通過設(shè)置"keys"這個選項來覆蓋默認(rèn)鍵設(shè)置，對象有下面的屬性：

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

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

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

});

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

    如果不止一個圖像，且自己修改了按鍵設(shè)置，那么只對一個圖像會應(yīng)用這個自定義設(shè)置。一般來說，當(dāng)"激活"（用鼠標(biāo)點擊）某個圖像時，這個圖像就會使用自定義的按鍵設(shè)置。

８、API方法

這個插件也提供了幾個API方法擴(kuò)展它的應(yīng)用，并能夠通過這些API方法跟其他web應(yīng)用聯(lián)合起來。

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

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

現(xiàn)在就可以使用此對象來調(diào)用公共的方法了。例如，設(shè)置一個默認(rèn)預(yù)定義的范圍：

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

ias.setOptions({ show: true });

ias.update();

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

 

二、簡單實例

１、寬度或者高度限制

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

$(document).ready(function () {

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

});

２、固定高寬比

配置aspectRatio選項就可以了，這里將其設(shè)置成"４：３"：

$(document).ready(function () {

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

});

３、設(shè)置初始選項區(qū)域

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

$(document).ready(function () {

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

});

三、回調(diào)函數(shù)示例

１、選區(qū)預(yù)覽

在下面的代碼小片斷里，onSelectChange()回調(diào)函數(shù)實現(xiàn)了選擇區(qū)域預(yù)覽的效果。

官方源代碼：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 });

});

由于預(yù)覽窗口是100x100px的，因此當(dāng)截圖窗口小于100px時，預(yù)覽圖會放大；當(dāng)截圖窗口大于100px時，預(yù)覽圖會縮小。這兩種效果圖如下：

截圖 1　當(dāng)截圖窗口大于100px時

截圖 2　當(dāng)截圖窗口小于100px時

需要說明的是，這里制作這種效果使用了一種技巧。最關(guān)鍵的一個是等比率縮放.它需要兩個圖片，第一圖是原圖，第二個圖是選擇區(qū)域后顯示的圖，用第一個圖上的選擇坐標(biāo)+css控制產(chǎn)生第二個圖，實際上兩個圖是一樣的，只不過通過css控制了第二張圖的顯示區(qū)域與縮放比率。證據(jù)如下：

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

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

值得注意的是：

回調(diào)函數(shù)中實際圖的寬高（這里的300,400是實際圖的高，要根據(jù)實際情況調(diào)整?。?回調(diào)函數(shù)中新圖的寬高這些參數(shù)必須設(shè)置正確、否則會出現(xiàn) 選擇偏差

２、提交選區(qū)的坐標(biāo)

如果需要實現(xiàn)真正截圖功能必須使用服務(wù)器端支持，例如php asp aspx jsp。也就是意味著，在客戶端選擇只是第一步，如果需進(jìn)一步的處理，必須要將這選區(qū)的坐標(biāo)提交給服務(wù)器。那么如何實現(xiàn)呢？

創(chuàng)建一個表彰，里面有四個隱藏域：

<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()回調(diào)函數(shù)將選擇后的數(shù)據(jù)賦給這些隱藏域，正如下面代碼那樣：

$(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);

}

});

});

這樣當(dāng)點擊"submit按鈕"時，頁面將上載到服務(wù)器，如果使用PHP的話，使用$_POST['x1']等就得到相應(yīng)的坐標(biāo)數(shù)據(jù)了。

最新評論