利用jquery的imgAreaSelect插件实现图片裁剪示例
將用戶(hù)上傳的圖片進(jìn)行裁剪再保存是現(xiàn)在web2.0應(yīng)用中常常處理的工作，現(xiàn)在借助jquery的imgareaselect插件再配合PHP的GD庫(kù)就可以輕松的實(shí)現(xiàn)這個(gè)在以前來(lái)說(shuō)非常棘手的功能。我們來(lái)看看它的實(shí)現(xiàn)步驟：
1、包含進(jìn)CSS文件(imgareaselect-default.css)和 jquery.imgareaselect.js文件
2、html代碼(要裁剪的圖片元素)
<imgid="selectbanner"src="/pic/banner.jpg"/>3、imgAreaSelect的數(shù)據(jù)操作
$('#selectbanner').imgAreaSelect({ selectionColor:'blue', x1:0, y1:0, x2:950,maxWidth:950,minWidth:950,y2:400,minHeight:400,maxHeight:400,
selectionOpacity:0.2, onSelectEnd: preview });
這樣即可在該圖片元素中使用裁剪功能了，當(dāng)選框確定之后我們要保存被選擇的圖片還得自己寫(xiě)代碼來(lái)操作。下面是當(dāng)確定好圖片區(qū)域后點(diǎn)擊一個(gè)裁剪按鈕后的操作：
//裁剪確認(rèn)操作$("#sliceButton").click(function(){
?var pic = $('#selectbanner').attr('src'); ?
?var x,y,w,h;
?$.post(
? "/template/sliceBanner",
? {
? ?x:$('#selectbanner').data('x'),
? ?y:$('#selectbanner').data('y'),
? ?w:$('#selectbanner').data('w'),
? ?h:$('#selectbanner').data('h'),
? ?pic:pic
? },
? function(data){
? ?//把裁剪后圖片加載到原處
? ?if(data){
? ? $('#selectbanner').attr(pic);
? ?}
? }
?);
?
}); //設(shè)置選取框的選取信息
//利用jquery中的data方法來(lái)保存生成的數(shù)據(jù)
function preview(img, selection){
?$('#selectbanner').data('x',selection.x1);
?$('#selectbanner').data('y',selection.y1);
?$('#selectbanner').data('w',selection.width);
?$('#selectbanner').data('h',selection.height);
}
4、PHP端的主要代碼：
//利用GD庫(kù)來(lái)作裁剪操作function sliceBanner(){
?$x =(int)$_POST['x'];
?$y =(int)$_POST['y'];
?$w =(int)$_POST['w'];
?$h =(int)$_POST['h'];
?$filename = trim($_POST['pic']);
?if(isset($filename)){
? $uploadBanner = ?'/temp'. $filename;
? $sliceBanner ='upload/'. $filename;
? $src_pic = getImageHander($uploadBanner);
? if(!$src_pic){
? ?echo 0;exit;
? }
? $dst_pic = imagecreatetruecolor($w, $h);
? imagecopyresampled($dst_pic, $src_pic,0,0, $x, $y, $w, $h, $w, $h);
? imagejpeg($dst_pic, $sliceBanner);
? imagedestroy($src_pic);
? imagedestroy($dst_pic);
? echo 1;exit;
?}
?echo 0;exit;
} function getImageHander ($url){
?$size=@getimagesize($url);
?switch($size['mime']){
? case'image/jpeg': $im = imagecreatefromjpeg($url);break;
? case'image/gif': $im = imagecreatefromgif($url);break;
? case'image/png': $im = imagecreatefrompng($url);break;
? default: $im=false;break;
?}
?return $im;
}
１、介紹
ImgAreaSelect是一jQuery插件，它支持用戶(hù)通過(guò)鼠標(biāo)拖曳選擇圖片的一部分，非常的fashion。另外，可以在這個(gè)選擇圖像區(qū)域的基礎(chǔ)上應(yīng)用網(wǎng)站的其他一些技術(shù)，比如圖片拖曳、圖片編輯等。
２、基本用法
這個(gè)插件基于jQuery上通過(guò)imgAreaSelect()方法來(lái)調(diào)用，它操作的對(duì)象是HTML中<img>元素內(nèi)的圖像。
<script type="text/javascript">
$(document).ready(function () {
$('img#photo').imgAreaSelect({
handles: true,
onSelectEnd: someFunction
});
});
</script>
如果在jQuery對(duì)象里有不止有一個(gè)img元素，那么這個(gè)插件會(huì)對(duì)里面的元素逐個(gè)應(yīng)用此方法。其實(shí)這個(gè)方法不僅僅應(yīng)用于img元素，它支持任何塊級(jí)元素（比如有圖像背景的div元素）。
與其它jQuery插件相似，這個(gè)插件可以在$(document).ready() 或者 $(window).load()句柄中初始化。
３、選項(xiàng)
用戶(hù)在這個(gè)插件的很多方面都可以進(jìn)行定制，用戶(hù)通過(guò)插件選項(xiàng)來(lái)達(dá)到這個(gè)目的（這些選項(xiàng)會(huì)在插件初始化的時(shí)候起效）。這些選項(xiàng)包括：
| 選項(xiàng) | 描述 |
| aspectRatio | 長(zhǎng)寬比，以后在選擇時(shí)候就會(huì)維持不變。 e.g. "4:3" |
| autoHide | 如果設(shè)為true，那么在選擇完后區(qū)域會(huì)消失。 Default:false |
| classPrefix | 預(yù)先給插件元素的前綴（詳見(jiàn)下面：５、元素與類(lèi)） Default:imgareaselect |
| disable | 如果設(shè)置成true，這個(gè)插件將不起作用（但是圖像還是可見(jiàn)的） |
| enable | 如果設(shè)置成true，這個(gè)插件又將重新起作用 |
| fadeSpeed | 若設(shè)置成大于零的某個(gè)數(shù)，將"漸隱/漸現(xiàn)"這個(gè)插件 Default:true |
| handles | 若設(shè)置成true，在改變大小的時(shí)候顯示改變框（就是角點(diǎn)有些小"矩形"） Default:false |
| hide | 若設(shè)置成true，則隱藏選擇框 |
| imageHeight | 圖像的真實(shí)高度（因?yàn)橛锌赡鼙籆SS縮放過(guò)了） |
| imageWidth | 圖像的真實(shí)寬度（因?yàn)橛锌赡鼙籆SS綻放過(guò)了） |
| instance | 若設(shè)為true，imgAreaSelect()函數(shù)會(huì)返回一個(gè)對(duì)選擇區(qū)域圖像的一個(gè)引用，以便能夠進(jìn)一步使用API。（詳見(jiàn)８、API方法） |
| keys | 啟用/關(guān)閉鍵盤(pán)支持（詳見(jiàn)７、鍵盤(pán)支持） Default:false |
| maxHeight | 限制選擇框（以像素為單位），設(shè)置最大、最小的高度、寬度。 |
| maxWidth | |
| minHeight | |
| minWidth | |
| movable | 設(shè)置是否支持選擇框移動(dòng) Default:true |
| parent | 指定此插件默認(rèn)所附加到的父元素 Default:body |
| persistent | 若設(shè)置成true，點(diǎn)擊選擇區(qū)域外將開(kāi)始一個(gè)新的選項(xiàng)（換言之，是否讓用戶(hù)只能移動(dòng)/縮放選擇區(qū)域） Default:false |
| remove | 若設(shè)置成true，則該插件將完全移除 |
| resizable | 決定選擇區(qū)域是否可以改變大小 Default:true |
| resizeMargin | 當(dāng)選擇區(qū)域?qū)挾瘸^(guò)多少像素時(shí)將啟用"可改變大小"模式 |
| show | 如果設(shè)置成true，選擇區(qū)域?qū)⒖梢?jiàn) |
| x1 y1 | 初始化時(shí)選擇框左上角的坐標(biāo) |
| x2 y2 | 初始化時(shí)選擇框右下角的坐標(biāo) |
| zIndex | 設(shè)置此插件所作用元素的z-index的值，一般情況下，imgAreaSelect 總是可以自動(dòng)計(jì)算出它的值，但是極少數(shù)情況下還是有必要設(shè)置的。 |
| onInit | 當(dāng)插件初始化時(shí)所調(diào)用的函數(shù)（詳見(jiàn)６、回調(diào)函數(shù)） |
| onSelectStart | 當(dāng)開(kāi)始選擇時(shí)所調(diào)用的函數(shù)（詳見(jiàn)６、回調(diào)函數(shù)） |
| onSelectChange | 當(dāng)改變選擇區(qū)域時(shí)所調(diào)用的函數(shù)（詳見(jiàn)６、回調(diào)函數(shù)） |
| onSelectEnd | 當(dāng)選擇結(jié)束時(shí)所調(diào)用的函數(shù)（詳見(jiàn)６、回調(diào)函數(shù)） |
４、樣式表
隨著插件發(fā)放的還有三個(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)顯示邊框的。
５、元素與類(lèi)
此插件通過(guò)創(chuàng)建幾個(gè)div元素來(lái)表示選擇區(qū)域，包括邊框、可調(diào)整手柄以及未選擇的區(qū)域。這些元素已經(jīng)指定了特定的類(lèi)名了，所以你可以通過(guò)CSS或者jQuery選擇器來(lái)獲得并操作它們。
| 類(lèi)名 | 指定給的對(duì)象 |
| imgareaselect-selection | 選擇的區(qū)域 |
| imgareaselect-border1 | 選擇區(qū)域的四個(gè)邊框，由四個(gè)div組成的 |
| imgareaselect-handle | 可改變大小的調(diào)整手柄（四個(gè)或者八個(gè)divs，如果沒(méi)有使能的話，則不顯示） |
| imgareaselect-outer | 未選擇區(qū)域，由四個(gè)divs組成 |
下面的對(duì)象示意圖展示了這插件的這些元素如何布置的：
其中的前綴"imgareaselect"是默認(rèn)的前綴，可以通過(guò)"classPrefix"選項(xiàng)來(lái)修改。這在當(dāng)有許多選擇框需要分別操作（比如修改樣式）的時(shí)候特別有用。
６、回調(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ì)。
| 性質(zhì) | 描述 |
| x1 y1 | 選擇區(qū)域左上角的坐標(biāo) |
| x2 y2 | 選擇區(qū)域右下角的坐標(biāo) |
| width | 選擇區(qū)域的寬度 |
| height | 選擇區(qū)域的高度 |
為了便于理解，下面給出當(dāng)選擇完后執(zhí)行的回調(diào)函數(shù)的例子：
$('img#photo').imgAreaSelect({
onSelectEnd: function (img, selection) {
alert('width: ' + selection.width + '; height: ' + selection.height);
}
});
７、鍵盤(pán)支持
如果選項(xiàng)"keys"設(shè)置為true,那么我們能夠通過(guò)鍵盤(pán)上的按鍵進(jìn)來(lái)選擇框的移動(dòng)。下面的鍵可以使用，默認(rèn)的功能如下：
| 按鍵 | 動(dòng)作 |
| 方向鍵 | 每次以10像素為單位移動(dòng)選區(qū) |
| Shift+方向鍵 | 每次以１像素為單位移動(dòng)選區(qū) |
| Ctrl+方向鍵 | 每次以10像素為單位擴(kuò)縮選區(qū) |
| Ctrl+Shift+方向鍵 | 每次以1像素為單位擴(kuò)縮選區(qū) |
當(dāng)然你也可以自己通過(guò)設(shè)置"keys"這個(gè)選項(xiàng)來(lái)覆蓋默認(rèn)鍵設(shè)置，對(duì)象有下面的屬性：
| 屬性 | 描述 |
| 方向鍵 | 設(shè)置方向鍵的功能 |
| Shift | 設(shè)置Shift鍵的功能 |
| Ctrl | 設(shè)置Ctrl鍵的功能 |
| Alt | 設(shè)置Alt鍵的功能 |
每個(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è)置。
８、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方法：
| 方法 | 描述 |
| getOptions | getOptions() －－返回當(dāng)前選項(xiàng)的配置 Returns: 一個(gè)包含當(dāng)前選項(xiàng)配置的對(duì)象（一般是JSON對(duì)象） |
| setOptions | setOptions(newOptions) －－設(shè)置插件選項(xiàng) 參數(shù): newOptions– 選項(xiàng)配置對(duì)象（一般是JSON對(duì)象） |
| getSelection | getSelection([noScale]) －－獲取當(dāng)前的選區(qū) 參數(shù)： noScale (可選) – 如果設(shè)置為真，那么對(duì)于返回的選區(qū)不進(jìn)行縮放操作。 返回： 選擇區(qū)域里的對(duì)象 |
| setSelection | setSelection(x1, y1, x2, y2, [noScale]) －－設(shè)置當(dāng)前選擇區(qū)域 參數(shù)： x1 – 選擇區(qū)域左上角X坐標(biāo) y1 – 選擇區(qū)域左上角Y坐標(biāo) x2 – 選擇區(qū)域右下角X坐標(biāo) y2 – 選擇區(qū)域右下角Y坐標(biāo) noScale (可選) –若設(shè)為真，則不會(huì)對(duì)圖像進(jìn)行縮放 注意：此方法只在插件內(nèi)設(shè)置選擇區(qū)域，并不會(huì)馬上觀察到選區(qū)的變化，如果需要立馬顯示更改后的區(qū)域，必須在使用setSelect()函數(shù)后就調(diào)用update()函數(shù)，且讓show選項(xiàng)為true. |
| cancelSelection | cancelSelection() －－取消當(dāng)前的選擇 注意：這個(gè)方法會(huì)隱藏"選擇/未選擇"區(qū)域，所以不必調(diào)用update()函數(shù)。 |
| update | update([resetKeyPress]) －－更新插件配置 參數(shù): resetKeyPress (可選) – 如果設(shè)成false，此實(shí)例的按鍵將復(fù)位（即不可用） |
二、簡(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" 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時(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。也就是意味著，在客戶(hù)端選擇只是第一步，如果需進(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ù)了
轉(zhuǎn)載于:https://www.cnblogs.com/webu/archive/2012/11/27/2791194.html
總結(jié)
以上是生活随笔為你收集整理的利用jquery的imgAreaSelect插件实现图片裁剪示例的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： eclipse 导入myeclipse
- 下一篇： 关于图片按比例自适应缩放