注：本文轉至http://www.cnblogs.com/fromearth/archive/2009/05/27/1490833.html
序言:
上次發了幾個jQuery的插件和些心得, 很多園友(也許是自己站上的)發郵件希望能提供更多的源碼, 正好這次有個同學希望在自己的壇子上掛個圖片裁剪以生成頭像的功能, 於是幫忙寫了這么個插件.也許很多園友用得着, 就一並發上來啦.
正文:
為了使層次分明及便於閱讀, 整個解決方案如下:
其中BitmapCutter.Core是圖片的服務器端處理程序, 類圖為:
簡單說明下, 更多說明可查看源碼注釋 :
Cutter為裁剪對象, 用於存儲客戶端通過AJAX提交的數據.
Helper為圖片處理類, 包括圖片翻轉(RotateImage()), 圖片裁剪(GenerateBitmap()).
Callback為服務器端圖片處理類, 通過使用Cutter封裝客戶端AJAX提交的數據, 然后調用Helper中的方法來完成圖片處理.
BitmapScissors是一個HttpHandler, 通過客戶端返回的 'action' 來調用Callback中的方法:
注: 此處用了反射來根據'action'值動態調用Callback中的方法, 如不習慣或認為不妥的請自行更改...
客戶端AJAX提交的Url為"scissors.axd", 實際為BitmapScissors類(如修改了服務器端處理程序, 請在Web.config中根據實際進行httpHandler節點配置), 本例為:
Ok, 下面開始介紹重點, $.fn.bitmapcutter插件的實現:
先來上張效果圖,標記下bitmapcutter中的Dom對象, 額, 喜歡剛大木的漫迷比較多, 就來張洛克昂的吧:
說明:
holder為原圖承載容器, 當原圖過大時可只顯示部分, 通過平移來查看未顯示區域的圖象, holder為div, 設置position樣式為relative, 這樣原圖img(同為img對象)的position樣式為absolute時, 即可通過控制其left, top 值來進行圖片的平移顯示, 注意holder的overflow必須設置成hidden, 這樣img將會被包裹在holder中,超出holder邊界的img將會被隱藏.
cutter為截取框, 可進行拖拽以選擇自己敢興趣的截取區域, 拖拽區域在holder容器內, 同時會在thumbimg(原理與holder+img相同)內生成縮略圖.
opts - 功能區域, 提供所有可用的功能按鈕, 包括: 放大, 縮小, 左移, 右移, 上移, 下移, 還原, 左旋轉, 右旋轉.
info - 圖片相素, 用於顯示當前待截取圖片的寬高比.
原理:
熟悉css的話應該很容易看出來, 利用相對定位的靈活性和js對css的控制.
插件說明:
由於插件的代碼比較多, 這里就揀重點的講了:
1. 全局變量:
由於在整個裁剪過程中會頻繁的使用一些數據和jQuery對象, 所以定義了一個全局變量用來存儲.
$originalSize: 原圖的相素, 在首次加載原圖時獲取, 不可改變, 主要是為放大, 縮小和還原提供一對基礎數據(長,寬).
$zoomValue: 當前縮放比, 在執行放大或縮小時同步.
$thumbimg: 裁剪區域縮略圖的jQuery對象, 在該dom被創建時賦值.
$img: 原圖jQuery對象, 在該dom被創建時獲取.
$cutter: 裁剪區域, 同樣在dom被創建時獲取.
2. 插件:
為了方便圖象的控制, 同樣編寫了幾個附加插件, 如果同學們在使用中有重名的請設法避免 ;-)
$.fn.f: 用於獲取jQuery對象的樣式值, 例如width, height, left, top等.
$.fn.loadBitmap: 用於預載入圖片以獲取正確的相素.
$.fn.scaleBitmap: 用於縮放圖片..縮放比率來自全局變量$zoomValue.
$.fn.dragndrop: 我的上一個插件$.fn.Drags的定制版, 主要是為了實現某一dom對象在特定元素內的拖拽.
3. API:
$.fn.bitmapCutter的API包括:
src(String): 待裁剪圖片的路徑(相對於程序主目錄), 默認為空, 必須,
renderTo(String(Selector)|jQuery Object): bitmapCutter插件容器, jQuery對象或選擇器, 默認為$(document.body),
holderSize(Object): holder對象的大小, 包括width和height兩個值, 默認為{ width: 300, height: 400 },
cutterSize(Object): cutter對象的大小(生成頭像大小), 包括width和height兩個值, 默認為{ width: 70, height: 70 },
zoomStep(Float): 每次縮放的比率更改幅度, 默認為0.2,
zoomIn(Float): 放大時與原圖的最大比, 默認為2.0,
zoomOut(Float): 縮小時於原圖的最大比, 默認為0.1,
rotateAngle(Int): 圖片翻轉角度, 可取值為 90, 180, -90, -180, 默認為 90,
moveStep(Int): 原圖平移時的平移象素, 默認為100,
onGenerated(Function): 成功生成頭像時觸發事件數, bitmapCutter向此方法傳遞一個參數 'src', 表示新裁剪生成的頭像路徑. 此屬性的默認值為 function(src) { },
lang(Object): 功能區域各按鈕的Tooltip, lang的API為:
zoomout(String): 放大, 默認值 'Zoom out',
zoomin(String): 縮小, 默認值'Zoom in',
original(String): 原始大小, 默認值'Original size',
clockwise(String): 順時針旋轉, 默認值'Clockwise rotation({0} degrees)', 需包含 {0} 以便格式化時使用rotateAngle值填充,
counterclockwise(String): 逆時針旋轉, 默認值'Counterclockwise rotation({0} degrees)', 需包含 {0} 以便格式化時使用rotateAngle值填充,
generate(String): 生成頭像, 默認值'Generate!',
process(String): 生成頭像時的提示語, 默認值為'Please wait, transaction is processing......',
left(String): 左平移, 默認值'Left',
right(String): 右平移, 默認值'Right',
up(String): 上移, 默認值'Up',
down(String): 下移, 默認值'Down'
API原型為:
4. 開發技巧:
為了便於代碼管理及功能優化, 將功能進行了歸納, 大致可分為:
縮放(zoom): 細分為放大和縮小,
翻轉(rotate): 細分為順時針和逆時針,
移動(move): 細分為上|右|下|左平移.
所以直接編寫三個 '基類' (具體實現看源碼):
izoom(zv): 提供圖片放大或縮小功能, zv為當前縮放比,
irotate(angle): 提供圖片旋轉功能, angle為當前旋轉角度,
imove(direction): 提供原圖平移功能, direction為移動方向, 包括'left','up','right','down'.
那么現在需要的就是細分各個功能:
這里我使用了一個對象scissors來封裝這些操作, 使用call來 '繼承', 當然你也可以使用 '冒充' 或者 '原型鏈' 這些手段來實現. 這樣的話在綁定這些方法的時候使用eval和json就可以很輕松的完成:
看不明白?那么貼上Html樹呢?
5. 自問自答
Q: 為什么要在服務器端來實現旋轉效果?
A: 為了實現大眾化和瀏覽器兼容, 所以我放棄了濾鏡和Canvas.
Q: Photoshop等圖片處理軟件在裁剪時都是實現反相效果的, 為什么不實現?
A: 我想一個程序兼顧UI的時候也要考慮效率, 如果實現反相的話, cutter對象內同樣需要內置一個img來與thumbimg同步, 那么當旋轉圖象時內存的累積是非常恐怖的.
Q: 相比Flash, Siverlight而言這么一個東西有什么好處?
A: 額, 其實我最初是打算用Flash做的, 不過考慮到大眾化的問題(多少.Net開發人員會as?), jQuery+HttpHandler是一個不錯的選擇, 開放的API, 開放的源碼, 我想遠比讓大家去改一個.fla來的輕松愉快.
Q: 那么壞處?
A: 大家都知道, 瀏覽器的緩存是把雙刃劍, 在bitmapCutter里他就很煩人, 為了實現圖片旋轉后刷新, 只能為img的src加上一個戳(隨機數?時間?whatever..), 但是這樣會帶來一個必然的結果 - 瀏覽器內存累積(目前已將此威脅降至最低 ;-)), 額..!@#$%
6. 注
未對gif類型圖片作特殊處理, 所以僅會取回第一楨處理, 生成頭像格式為Png, 如果需要的話自己修改源碼.
jquery.bitmapcutter.js 尾部方法為模擬 c# string.format, 必須的.
支持鍵盤操作, 方向鍵控制平移, +-控制放大縮小, 不喜可從源碼刪除.
7. demo中的簡單示例
使用一張C.C的圖來截取頭像, 設置截取框長寬為120:120, 容器為id為container的div, 每次旋轉角度為90, 順時針旋轉功能按鈕的提示為 '順時針旋轉{0}度.'
效果:
8. 源碼包(測試圖片多):
google code
看完這篇博文后自己試着寫了個demo，但出現了些問題。個人認為需注意兩個地方
1）要記得添加引用“BitmapCutter.Core.dll”
2）要在web.config文件中<system.web>節點下配置
<httpHandlers>
<add path="scissors.axd" verb="*" type="BitmapCutter.Core.HttpHandler.BitmapScissors,BitmapCutter.Core" validate="false"/>
</httpHandlers>
3）貌似jquery只能用jquery-1.3.1.min.js版的，用1.4.1版就無法拖動也不能截取了。
不然會出現很多的麻煩哦！