jQuery插件imgAreaSelect怎么用

這篇文章主要為大家展示了“jQuery插件imgAreaSelect怎么用”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“jQuery插件imgAreaSelect怎么用”這篇文章吧。

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" rel="external nofollow" /> <br><script type="text/javascript" src="../jquery.imgareaselect-0.9.10/scripts/jquery.imgareaselect.pack.js"></script>

2、下載的插件里有三個(gè)樣式表

imgareaselect-default.css – 這是默認(rèn)的樣式表,

imgareaselect-animated.css – 這個(gè)樣式與默認(rèn)的樣式表基本是一樣的，只是它能夠讓選擇區(qū)域邊框變化

imgareaselect-deprecated.css – 只有你想使用不贊同的選項(xiàng)時(shí)才用這個(gè)樣式表。

你只需要在html頭部將其中的一個(gè)樣式表添加進(jìn)來(lái)就可以。這css文件夾中還包含４張gif圖片，它們是用來(lái)顯示邊框的。

3、元素分布如圖所示

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

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

 4、選項(xiàng)

用戶在這個(gè)插件的很多方面都可以進(jìn)行定制，用戶通過(guò)插件選項(xiàng)來(lái)達(dá)到這個(gè)目的（這些選項(xiàng)會(huì)在插件初始化的時(shí)候起效）。這些選項(xiàng)包括：

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

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

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

$('img#photo').imgAreaSelect({
onSelectEnd: function (img, selection) {
alert('width: ' + selection.width + '; height: ' + selection.height);
}
});

6、鍵盤支持

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

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

$('img#example').imgAreaSelect({
keys: { arrows: 15, ctrl: 5, shift: 'resize' }
});

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

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

7、API方法

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

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

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

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

ias.setSelection(50, 50, 150, 200, true);
ias.setOptions({ show: true });
ias.update();

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

二、簡(jiǎn)單實(shí)例

１、寬度或者高度限制

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

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

２、固定高寬比

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

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

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

配置x1, y1, x2與 y2選項(xiàng)就可以了：

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

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

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

在下面的代碼小片斷里，onSelectChange()回調(diào)函數(shù)實(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'
});
}
//這里通過(guò)jQuery語(yǔ)法在原來(lái)圖片后插入同樣的圖片
$(document).ready(function () {
$('<div><img src="ferret.jpg"  /><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時(shí)，預(yù)覽圖會(huì)放大；當(dāng)截圖窗口大于100px時(shí)，預(yù)覽圖會(huì)縮小。這兩種效果圖如下：

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

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

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

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

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

值得注意的是：

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

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

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

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

<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時(shí)，使用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)點(diǎn)擊"submit按鈕"時(shí)，頁(yè)面將上載到服務(wù)器，如果使用PHP的話，使用$_POST['x1']等就得到相應(yīng)的坐標(biāo)數(shù)據(jù)了。

以上是“jQuery插件imgAreaSelect怎么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！