imgAreaSelect插件實現圖片裁剪 用的Jquery不能超過1.9

利用jquery的imgAreaSelect插件實現圖片裁剪示例

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

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

//裁剪確認操做

$("#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是實際圖的高，要根據實際狀況調整！）,回調函數中新圖的寬高這些參數必須設置正確、不然會出現 選擇誤差

２、提交選區的座標

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

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

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

}

});

});

這樣當點擊"submit按鈕"時，頁面將上載到服務器，若是使用PHP的話，使用$_POST['x1']等就獲得相應的座標數據了