利用jquery的imgAreaSelect外掛程式實現圖片裁剪樣本

利用jquery的imgAreaSelect外掛程式實現圖片裁剪樣本

將使用者上傳的圖片進行裁剪再儲存是現在web2.0應用中常常處理的工作，現在藉助jquery的imgareaselect外掛程式再配合PHP的GD庫就可以輕鬆的實現這個在以前來說非常棘手的功能。我們來看看它的實現步驟：

1、包含進CSS檔案(imgareaselect-default.css)和 jquery.imgareaselect.js檔案

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

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

這樣即可在該圖片元素中使用裁剪功能了，當選框確定之後我們要儲存被選擇的圖片還得自己寫代碼來操作。下面是當確定好圖片地區後點擊一個裁剪按鈕後的操作：

//裁剪確認操作

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

} 

4、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中元素內的映像。

複製代碼 代碼如下:
<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，此執行個體的按鍵將複位（即不可用）

二、簡單一實例

１、寬度或者高度限制

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 () {

$('')

.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"也是"http://www.bkjia.com/uploads/allimg/140803/043SL248-2.jpg"的圖片。再注意一下，這一段裡的"overflow: 'hidden',"這一行代碼就是讓超過100px高寬的圖片額外內容隱藏掉。

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

值得注意的是：

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

２、提交選區的座標

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

建立一個表彰，裡面有四個隱藏欄位：

然後在初始化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']等就得到相應的座標資料了