基于jQuery的圖片剪切插件

更新時(shí)間：2011年08月03日 23:57:25 作者：

網(wǎng)頁應(yīng)用程序需要對(duì)豐富的內(nèi)容提供簡(jiǎn)單易用的上傳和操作方式，但是這樣會(huì)給只有少數(shù)圖片處理技能的用戶造成很大的困難。圖片剪切是最基本的圖片處理技術(shù)，這個(gè)詳細(xì)的教程將包括在jQuery庫上創(chuàng)建此參加的每一個(gè)步驟。

第一步：建立工作區(qū)間

首先，我們要位我們這個(gè)教程建立一個(gè)工作區(qū)間，建立如圖所示的文件層次結(jié)構(gòu)，以及新建相應(yīng)的空文件。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<link href="resources/css/style.css" rel="stylesheet" type="text/css" />
<link href="resources/js/imageCrop/jquery.imagecrop.css" rel="stylesheet" type="text/css" />
<script src="resources/js/imageCrop/jquery.imagecrop.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div id="wrapper">
<h1>
Jquery Image Croping plug-in</h1>
<div class="image-decorator">
<img alt="Jquery Image Croping plug-in" height="360px" id="example" src="resources/images/example.JPG"
width="480" /></div>
</div>
</form>
</body>
</html>
[/code]
style.css

復(fù)制代碼代碼如下:

 
* { 
margin : 0; 
outline : 0; 
padding : 0; 
} 
/*初始化網(wǎng)頁樣式*/ 
body { 
background-color : #ededed; 
color : #646464; 
font-family : 'Verdana', 'Geneva', sans-serif; 
font-size : 12px; 
text-shadow : 0 1px 0 #ffffff; 
} 
h1 { 
font-size : 24px; 
font-weight : normal; 
margin : 0 0 10px 0; 
} 
div#wrapper { 
margin : 25px 25px 25px 25px; 
} 
/*選擇id為wrapper的div*/ 
div.image-decorator { 
-moz-border-radius : 5px 5px 5px 5px;/*針對(duì)火狐的瀏覽器的盒子的銳化*/ 
-moz-box-shadow : 0 0 6px #c8c8c8;/*針對(duì)火狐的瀏覽器的盒子的邊框陰影處理*/ 
-webkit-border-radius : 5px 5px 5px 5px;/*WebKit 是一個(gè)開源的瀏覽器引擎*/ 
-webkit-box-shadow : 0 0 6px #c8c8c8; 
background-color : #ffffff; 
border : 1px solid #c8c8c8; 
border-radius : 5px 5px 5px 5px; 
box-shadow : 0 0 6px #c8c8c8; 
display : inline-block;/*將對(duì)象呈遞為內(nèi)聯(lián)對(duì)象，但是對(duì)象的內(nèi)容作為塊對(duì)象呈遞。旁邊的內(nèi)聯(lián)對(duì)象會(huì)被呈遞在同一行內(nèi)，允許空格。支持的瀏覽器有：Opera、Safari*/ 
height : 360px; 
padding : 5px 5px 5px 5px; 
width : 480px; 
} 

以上我們通過改變背景顏色和設(shè)置一些基本的樣式，使我們的頁面更具有可觀賞性。
第三步：寫一個(gè)基本的jQuery插件
讓我們開始寫一個(gè)基本的jQuery插件吧，在寫之前，如果讀者你從未有寫jQuery插件的經(jīng)歷，建議先看看官方給出的插件教程（http://docs.jquery.com/Plugins/Authoring），這個(gè)是英文版的，中文版的沒找的，寫者打算翻譯，敬請(qǐng)期待。
打開/resources/js/imageCrop/jquery.imagecrop.js，并且加入如下圖所示的js代碼

復(fù)制代碼代碼如下:

 
//一般情況下請(qǐng)將所寫的插件代碼包含在‘(function($) { // 插件代碼在這里 }) (jQuery);' 
(function($) { 
$.imageCrop = function(object, customOptions) {}; 
$.fn.imageCrop = function (customOptions) { 
//Iterate over each object 
//對(duì)每一個(gè)對(duì)象進(jìn)行迭代 
this.each(function () { 
var currentObject = this, 
image = new Image(); 
//當(dāng)對(duì)象加載完畢時(shí)，給予附加上imageCrop剪切的功能 
image.onload = function () { 
$.imageCrop(currentObject, customOptions); 
}; 
//重設(shè)圖片的地址，因?yàn)橛袝r(shí)被緩存的圖像不能被很快的加載 
image.src = currentObject.src; 
}); 
//除非你的插件返回一個(gè)確定的值，那么通常情況下要求函數(shù)返回‘this'關(guān)鍵字 
//以此來保持編程的鏈?zhǔn)交?
return this; 
}; 
}) (jQuery); 

我們剛剛擴(kuò)展了jQuery，通過在jQuery.fn這個(gè)對(duì)象上新添加一個(gè)方法屬性?，F(xiàn)在我們完成了對(duì)每一個(gè)對(duì)象進(jìn)行迭代并當(dāng)其加載完畢時(shí)為其附上imageCrop功能的基本插件。注意到被緩存的圖片可能不會(huì)被很快的下載，所以重置了它的圖片地址。

第四步：加入可定制的選擇

通過可以定制的選擇，使得對(duì)用戶來說有了更多的選擇以及使插件更加具有靈活性。（備注：以下代碼均按照順序來的）

復(fù)制代碼代碼如下:

 
//將插件的選項(xiàng)封裝在一個(gè)常量對(duì)象中，遠(yuǎn)遠(yuǎn)好于傳遞一長串參數(shù)來傳遞。 
//這樣使得可以在插件默認(rèn)的情況下進(jìn)行擴(kuò)展 
var defaultOptions = { 
allowMove: true, 
allowResize: true, 
allowSelect: true, 
minSelect: [0, 0], 
outlineOpacity: 0.5, 
overlayOpacity: 0.5, 
selectionPosition: [0, 0], 
selectionWidth: 0, 
selectionHeight: 0 
}; 

// 將選項(xiàng)設(shè)為默認(rèn)選項(xiàng) 
var options = defaultOptions; 

// 然后將其和客戶定制的選項(xiàng)合并 
setOptions(customOptions); 

以上我們通過定義一個(gè)包含默認(rèn)選項(xiàng)的數(shù)組，然后通過使用setOption函數(shù)來實(shí)現(xiàn)將默認(rèn)選項(xiàng)和定制選項(xiàng)進(jìn)行合并?，F(xiàn)在讓我們來寫這個(gè)合并函數(shù)體

復(fù)制代碼代碼如下:

 
// 將默認(rèn)選項(xiàng)和客戶定制的選項(xiàng)合并 
function setOptions(customOptions) { 
options = $.extend(options, customOptions); 
}; 

$.extend()函數(shù)實(shí)現(xiàn)了將兩個(gè)或者多個(gè)對(duì)象合并到第一個(gè)對(duì)象中的功能。

選項(xiàng)

下面的列表解釋了插件中的每一個(gè)選項(xiàng)

allowMove – 指定選擇區(qū)是否可以移動(dòng)（默認(rèn)的值是true.）
allowResize – 指定選擇區(qū)是否可以被重新指定大?。J(rèn)的值是true）
allowSelect – 指定用戶是否可以重新指定選擇區(qū)（默認(rèn)的值是true）
minSelect – 一個(gè)新的選擇區(qū)最小的大小（默認(rèn)的大小是[0, 0]）
outlineOpacity – 輪廓的透明度（默認(rèn)的值是0.5）
overlayOpacity – 覆蓋層的透明度（默認(rèn)的值是0.5）
selectionPosition – 選擇區(qū)得位置（默認(rèn)的是[0, 0]）
selectionWidth – 選擇區(qū)得寬度（默認(rèn)的值是0）
selectionHeight – 選擇區(qū)的長度（默認(rèn)的值是0）
第五步：建立圖像層

這一步我們將改變文檔的結(jié)構(gòu)，以此來為下一步做準(zhǔn)備：插件的表面

首先我們要初始化圖像層，然后初始化化圖像包含層

復(fù)制代碼代碼如下:

 
// 初始化圖像層 
var $image = $(object); 

// 初始化一個(gè)圖像支持層 
var $holder = $('<div />') 
.css({ 
position: 'relative' 
}) 
.width($image.width()) 
.height($image.height()); 

// imag包含在holder層里面 .wrap()函數(shù) 

$image.wrap($holder) 
.css({ 
position: 'absolute' 
}); 

　　正如你所見，包含層和圖像具有同樣的大小并且包含層和圖像是相對(duì)定位。然后我們使用.wrap函數(shù)使得圖像包含在其中

在圖像的上面是覆蓋層：

復(fù)制代碼代碼如下:

 
//初始化一個(gè)覆蓋層，并將其置于圖像之上 
var $overlay = $('<div id="image-crop-overlay" />') 
.css({ 
opacity: options.overlayOpacity, 
position: 'absolute' 
}) 
.width($image.width()) 
.height($image.height()) 
.insertAfter($image); 

　　這個(gè)層同樣和圖像一樣大，但是是絕對(duì)定位。我們從options.outlineOpacity得到透明度。這個(gè)元素?fù)碛幸粋€(gè)Id，所以我們可以改變通過插件的css來改變它的樣式。在最后我們用.insertAfter($image)方法將覆蓋層恰好放在圖像層的下面。

下面一層是觸犯器層

復(fù)制代碼代碼如下:

 
// 初始化一個(gè)觸發(fā)器層，并將其放在覆蓋層的上面 
var $trigger = $('<div />') 
.css({ 
backgroundColor: '#000000', 
opacity: 0, 
position: 'absolute' 
}) 
.width($image.width()) 
.height($image.height()) 
.insertAfter($overlay); 

　　這一次對(duì)于用戶來說是不可見的，但是它會(huì)處理一些事件。

接下來是邊框?qū)雍瓦x擇層

復(fù)制代碼代碼如下:

 
// 初始化一個(gè)邊框?qū)?，將其放在觸發(fā)器層的上面 
var $outline = $('<div id="image-crop-outline" />') 
.css({ 
opacity: options.outlineOpacity, 
position: 'absolute' 
}) 
.insertAfter($trigger); 

// 初始化一個(gè)選擇層，將其置于邊框?qū)拥纳厦?
var $selection = $('<div />') 
.css({ 
background: 'url(' + $image.attr('src') + ') no-repeat', 
position: 'absolute' 
}) 
.insertAfter($outline); 

　　.attr()方法是用來返回某個(gè)特定的屬性的值，我們用它來得到圖像的地址，并將其作為選擇層的背景

絕對(duì)定位在相對(duì)定位里面

一個(gè)相對(duì)定位的元素可以控制絕對(duì)定位的元素，使得絕對(duì)定位的元素在相對(duì)定位的元素的里面。這也算為什么包含層是相對(duì)定位，而所有的它的子元素都是絕對(duì)定位

第六步：更新界面

　　　　　　首先我們要初始為一些全局變量

復(fù)制代碼代碼如下:

 
//初始化全局變量 
var selectionExists, 
selectionOffset = [0, 0], 
selectionOrigin = [0, 0]; 

　　selectionExists會(huì)告知我們是否存在著一個(gè)選擇區(qū)域，selectionOffset會(huì)包含相對(duì)于起點(diǎn)的偏移量，selectionOrigin會(huì)包含選擇區(qū)域的起點(diǎn)

下面的條件用于當(dāng)插件被加載時(shí)選擇區(qū)域就存在

復(fù)制代碼代碼如下:

 
//指示選擇區(qū)域的大小是否比最小的大，然后再根據(jù)它來設(shè)定選擇區(qū)域是否存在 
if (options.selectionWidth > options.minSelect[0] && 
options.selectionHeight > options.minSelect[1]) 
selectionExists = true; 
else 
selectionExists = false; 
　　現(xiàn)在我們將調(diào)用updateInterface來初始化插件的界面 

//第一次調(diào)用‘uploadInterface'函數(shù)來初始化插件的界面 
updateInterface(); 

您可能感興趣的文章: