採用jquery的imgAreaSelect樣品圖像裁剪示範插件實現

將用戶上傳的圖片進行裁剪再保存是現在web2.0應用中常常處理的工做，現在藉助jquery的imgareaselect插件再配合PHP的GD庫就可以輕鬆的實現這個在曾經來講很棘手的功能。

咱們來看看它的實現步驟：

一、包括進CSS文件(imgareaselect-default.css)和 jquery.imgareaselect.js文件

二、html代碼(要裁剪的圖片元素)

<img id="selectbanner" src="/pic/banner.jpg" />

三、imgAreaSelect的數據操做

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

這樣就能夠在該圖片元素中使用裁剪功能了，當選框肯定以後咱們要保存被選擇的圖片還得本身寫代碼來操做。如下是當肯定好圖片區域後點擊一個裁剪button後的操做：

//裁剪確認操做

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

   }

  }

 );

 

});

//設置選取框的選取信息

//利用jquery中的data方法來保存生成的數據

function preview(img, selection) { 

 $('#selectbanner').data('x',selection.x1);

 $('#selectbanner').data('y',selection.y1);

 $('#selectbanner').data('w',selection.width);

 $('#selectbanner').data('h',selection.height);

} 

四、PHP端的主要代碼：

//利用GD庫來做裁剪操做

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插件，它支持用戶經過鼠標拖曳選擇圖片的一部分。很的fashion。另外。可以在這個選擇圖像區域的基礎上應用站點的其它一些技術，比方圖片拖曳、圖片編輯等。 
２、基本使用方法 
這個插件基於jQuery上經過imgAreaSelect()方法來調用。它操做的對象是HTML中<img>元素內的圖像。

複製代碼 代碼例如如下:

<script type="text/javascript"> 
$(document).ready(function () { 
$('img#photo').imgAreaSelect({ 
handles: true, 
onSelectEnd: someFunction 
}); 
}); 
</script>

假設在jQuery對象裏有不止有一個img元素，那麼這個插件會對裏面的元素逐個應用此方法。

事實上這種方法不僅應用於img元素。它支持不論什麼塊級元素（比方有圖像背景的div元素）。 
與其餘jQuery插件類似。這個插件可以在$(document).ready() 或者 $(window).load()句柄中初始化。 
３、選項 
用戶在這個插件的很是多方面都可以進行定製，用戶經過插件選項來達到這個目的（這些選項會在插件初始化的時候起效）。這些選項包含：

選項	描寫敘述
aspectRatio	長寬比，之後在選擇時候就會維持不變。 e.g. "4:3"
autoHide	假設設爲true，那麼在選擇完後區域會消失。 Default:false
classPrefix	預先給插件元素的前綴（詳見如下：５、元素與類） Default:imgareaselect
disable	假設設置成true。這個插件將不起做用（但是圖像仍是可見的）
enable	假設設置成true，這個插件又將又一次起做用
fadeSpeed	若設置成大於零的某個數。將"漸隱/漸現"這個插件 Default:true
handles	若設置成true。在改變大小的時候顯示改變框（就是角點有些小"矩形"） Default:false
hide	若設置成true，則隱藏選擇框
imageHeight	圖像的真實高度（因爲有可能被CSS縮放過了）
imageWidth	圖像的真實寬度（因爲有可能被CSS綻開過了）
instance	若設爲true，imgAreaSelect()函數會返回一個對選擇區域圖像的一個引用，以即可以進一步使用API。 （詳見８、API方法）
keys	啓用/關閉鍵盤支持（詳見７、鍵盤支持） Default:false
maxHeight	限制選擇框（以像素爲單位），設置最大、最小的高度、寬度。
maxWidth
minHeight
minWidth
movable	設置是否支持選擇框移動 Default:true
parent	指定此插件默認所附加到的父元素 Default:body
persistent	若設置成true。點擊選擇區域外將開始一個新的選項（換言之，是否讓用戶僅僅能移動/縮放選擇區域） Default:false
remove	若設置成true，則該插件將全然移除
resizable	決定選擇區域可否夠改變大小 Default:true
resizeMargin	當選擇區域寬度超過多少像素時將啓用"可改變大小"模式
show	假設設置成true，選擇區域將可見
x1 y1	初始化時選擇框左上角的座標
x2 y2	初始化時選擇框右下角的座標
zIndex	設置此插件所做用元素的z-index的值，普通狀況下。imgAreaSelect 老是可以本身主動計算出它的值，但是極少數狀況下仍是有必要設置的。
onInit	當插件初始化時所調用的函數（詳見６、回調函數）
onSelectStart	當開始選擇時所調用的函數（詳見６、回調函數）
onSelectChange	當改變選擇區域時所調用的函數（詳見６、回調函數）
onSelectEnd	當選擇結束時所調用的函數（詳見６、回調函數）

４、樣式表 
隨着插件發放的還有三個樣式表： 

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

５、元素與類 
此插件經過建立幾個div元素來表示選擇區域。包含邊框、可調整手柄以及未選擇的區域。

這些元素已經指定了特定的類名了。因此你可以經過CSS或者jQuery選擇器來得到並操做它們。

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

如下的對象示意圖展現了這插件的這些元素怎樣佈置的：

當中的前綴"imgareaselect"是默認的前綴，可以經過"classPrefix"選項來改動。這在當有不少選擇框需要分別操做（比方改動樣式）的時候特別實用。

６、回調函數

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

性質	描寫敘述
x1 y1	選擇區域左上角的座標
x2 y2	選擇區域右下角的座標
width	選擇區域的寬度
height	選擇區域的高度

爲了便於理解。如下給出當選擇完後運行的回調函數的樣例：

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

onSelectEnd: function (img, selection) {

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

}

});

７、鍵盤支持

假設選項"keys"設置爲true,那麼咱們能夠經過鍵盤上的按鍵進來選擇框的移動。如下的鍵可使用，默認的功能例如如下：

按鍵	動做
方向鍵	每次以10像素爲單位移動選區
Shift+方向鍵	每次以１像素爲單位移動選區
Ctrl+方向鍵	每次以10像素爲單位擴縮選區
Ctrl+Shift+方向鍵	每次以1像素爲單位擴縮選區

固然你也可以本身經過設置"keys"這個選項來覆蓋默認鍵設置，對象有如下的屬性：

屬性	描寫敘述
方向鍵	設置方向鍵的功能
Shift	設置Shift鍵的功能
Ctrl	設置Ctrl鍵的功能
Alt	設置Alt鍵的功能

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

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

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

});

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

假設不止一個圖像，且本身改動了按鍵設置。那麼僅僅對一個圖像會應用這個本身定義設置。

通常來講，當"激活"（用鼠標點擊）某個圖像時，這個圖像就會使用本身定義的按鍵設置。

８、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方法：

方法	描寫敘述
getOptions	getOptions() 　　－－返回當前選項的配置 Returns: 一個包括當前選項配置的對象（一般是JSON對象）
setOptions	setOptions(newOptions) －－設置插件選項 參數: newOptions – 選項配置對象（一般是JSON對象）
getSelection	getSelection([noScale]) 　－－獲取當前的選區 參數： noScale (可選) – 假設設置爲真。那麼對於返回的選區不進行縮放操做。 返回： 選擇區域裏的對象
setSelection	setSelection(x1, y1, x2, y2, [noScale]) 　　－－設置當前選擇區域 參數： x1 – 選擇區域左上角X座標 y1 – 選擇區域左上角Y座標 x2 – 選擇區域右下角X座標 y2 – 選擇區域右下角Y座標 noScale (可選) –若設爲真，則不會對圖像進行縮放 注意：此方法僅僅在插件內設置選擇區域。並不會當即觀察到選區的變化。假設需要馬上顯示更改後的區域，必須在使用setSelect()函數後就調用update()函數。且讓show選項爲true.
cancelSelection	cancelSelection() 　　－－取消當前的選擇 注意：這種方法會隱藏"選擇/未選擇"區域，因此沒必要調用update()函數。
update	update([resetKeyPress]) －－更新插件配置 參數: resetKeyPress (可選) – 假設設成false，此實例的按鍵將復位（即不可用）

2、簡單實例

１、寬度或者高度限制

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 });

});

3、回調函數演示樣例

１、選區預覽

在如下的代碼小片段裏。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是實際圖的高，要依據實際狀況調整。）,回調函數中新圖的寬高這些參數必須設置正確、不然會出現 選擇誤差

２、提交選區的座標

假設須要實現真正截圖功能必須使用server端支持，好比php asp aspx jsp。也就是意味着。在client選擇僅僅是第一步，假設需進一步的處理，必須要將這選區的座標提交給server。那麼怎樣實現呢？

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

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

}

});

});

這樣當點擊"submitbutton"時，頁面將上載到server。假設採用PHP若是，採用$_POST['x1']等，以得到對應的座標數據