正文:
為了使層次分明及便于閱讀,  整個(gè)解決方案如下:

其中BitmapCutter.Core是圖片的服務(wù)器端處理程序, 類圖為:

簡(jiǎn)單說明下, 更多說明可查看源碼注釋 :

Cutter為裁剪對(duì)象, 用于存儲(chǔ)客戶端通過AJAX提交的數(shù)據(jù).

Helper為圖片處理類, 包括圖片翻轉(zhuǎn)(RotateImage()), 圖片裁剪(GenerateBitmap()).

Callback為服務(wù)器端圖片處理類, 通過使用Cutter封裝客戶端AJAX提交的數(shù)據(jù), 然后調(diào)用Helper中的方法來完成圖片處理.

BitmapScissors是一個(gè)HttpHandler, 通過客戶端返回的 'action' 來調(diào)用Callback中的方法:

注: 此處用了反射來根據(jù)'action'值動(dòng)態(tài)調(diào)用Callback中的方法, 如不習(xí)慣或認(rèn)為不妥的請(qǐng)自行更改...

客戶端AJAX提交的Url為"scissors.axd", 實(shí)際為BitmapScissors類(如修改了服務(wù)器端處理程序, 請(qǐng)?jiān)赪eb.config中根據(jù)實(shí)際進(jìn)行httpHandler節(jié)點(diǎn)配置), 本例為:

Ok, 下面開始介紹重點(diǎn), $.fn.bitmapcutter插件的實(shí)現(xiàn):

先來上張效果圖,標(biāo)記下bitmapcutter中的Dom對(duì)象, 額, 喜歡剛大木的漫迷比較多, 就來張洛克昂的吧:

說明:

holder為原圖承載容器, 當(dāng)原圖過大時(shí)可只顯示部分, 通過平移來查看未顯示區(qū)域的圖象, holder為div, 設(shè)置position樣式為relative, 這樣原圖img(同為img對(duì)象)的position樣式為absolute時(shí), 即可通過控制其left, top 值來進(jìn)行圖片的平移顯示, 注意holder的overflow必須設(shè)置成hidden, 這樣img將會(huì)被包裹在holder中,超出holder邊界的img將會(huì)被隱藏.

cutter為截取框, 可進(jìn)行拖拽以選擇自己敢興趣的截取區(qū)域, 拖拽區(qū)域在holder容器內(nèi),  同時(shí)會(huì)在thumbimg(原理與holder+img相同)內(nèi)生成縮略圖.

opts - 功能區(qū)域, 提供所有可用的功能按鈕, 包括: 放大, 縮小, 左移, 右移, 上移, 下移, 還原, 左旋轉(zhuǎn), 右旋轉(zhuǎn).

info - 圖片相素, 用于顯示當(dāng)前待截取圖片的寬高比.

原理:

熟悉css的話應(yīng)該很容易看出來, 利用相對(duì)定位的靈活性和js對(duì)css的控制.

插件說明:

由于插件的代碼比較多, 這里就揀重點(diǎn)的講了:

1. 全局變量:

  由于在整個(gè)裁剪過程中會(huì)頻繁的使用一些數(shù)據(jù)和jQuery對(duì)象, 所以定義了一個(gè)全局變量用來存儲(chǔ).

  $originalSize: 原圖的相素, 在首次加載原圖時(shí)獲取, 不可改變, 主要是為放大, 縮小和還原提供一對(duì)基礎(chǔ)數(shù)據(jù)(長,寬).
  $zoomValue: 當(dāng)前縮放比, 在執(zhí)行放大或縮小時(shí)同步.
  $thumbimg: 裁剪區(qū)域縮略圖的jQuery對(duì)象, 在該dom被創(chuàng)建時(shí)賦值.
  $img: 原圖jQuery對(duì)象, 在該dom被創(chuàng)建時(shí)獲取.
  $cutter: 裁剪區(qū)域, 同樣在dom被創(chuàng)建時(shí)獲取.

2. 插件:

  為了方便圖象的控制, 同樣編寫了幾個(gè)附加插件, 如果同學(xué)們?cè)谑褂弥杏兄孛恼?qǐng)?jiān)O(shè)法避免 ;-)

  $.fn.f: 用于獲取jQuery對(duì)象的樣式值, 例如width, height, left, top等.
  $.fn.loadBitmap: 用于預(yù)載入圖片以獲取正確的相素.
  $.fn.scaleBitmap: 用于縮放圖片..縮放比率來自全局變量$zoomValue.
  $.fn.dragndrop: 我的上一個(gè)插件$.fn.Drags的定制版, 主要是為了實(shí)現(xiàn)某一dom對(duì)象在特定元素內(nèi)的拖拽.

3. API:

  $.fn.bitmapCutter的API包括:

  src(String): 待裁剪圖片的路徑(相對(duì)于程序主目錄), 默認(rèn)為空, 必須,
  renderTo(String(Selector)|jQuery Object): bitmapCutter插件容器, jQuery對(duì)象或選擇器, 默認(rèn)為$(document.body),
  holderSize(Object): holder對(duì)象的大小, 包括width和height兩個(gè)值, 默認(rèn)為{ width: 300, height: 400 },
  cutterSize(Object): cutter對(duì)象的大小(生成頭像大小), 包括width和height兩個(gè)值, 默認(rèn)為{ width: 70, height: 70 },
  zoomStep(Float): 每次縮放的比率更改幅度, 默認(rèn)為0.2,
  zoomIn(Float): 放大時(shí)與原圖的最大比, 默認(rèn)為2.0,
  zoomOut(Float): 縮小時(shí)于原圖的最大比, 默認(rèn)為0.1,
  rotateAngle(Int): 圖片翻轉(zhuǎn)角度, 可取值為 90, 180, -90, -180, 默認(rèn)為 90,
  moveStep(Int): 原圖平移時(shí)的平移象素, 默認(rèn)為100,
  onGenerated(Function): 成功生成頭像時(shí)觸發(fā)事件數(shù), bitmapCutter向此方法傳遞一個(gè)參數(shù) 'src', 表示新裁剪生成的頭像路徑. 此屬性的默認(rèn)值為 function(src) { },
  lang(Object): 功能區(qū)域各按鈕的Tooltip, lang的API為:

                zoomout(String): 放大, 默認(rèn)值 'Zoom out',
                zoomin(String): 縮小, 默認(rèn)值'Zoom in',
                original(String): 原始大小, 默認(rèn)值'Original size',
                clockwise(String): 順時(shí)針旋轉(zhuǎn), 默認(rèn)值'Clockwise rotation({0} degrees)', 需包含 {0} 以便格式化時(shí)使用rotateAngle值填充,
                counterclockwise(String): 逆時(shí)針旋轉(zhuǎn), 默認(rèn)值'Counterclockwise rotation({0} degrees)', 需包含 {0} 以便格式化時(shí)使用rotateAngle值填充,
                generate(String): 生成頭像, 默認(rèn)值'Generate!',
                process(String): 生成頭像時(shí)的提示語, 默認(rèn)值為'Please wait, transaction is processing......',
                left(String): 左平移, 默認(rèn)值'Left',
                right(String): 右平移, 默認(rèn)值'Right',
                up(String): 上移, 默認(rèn)值'Up',
                down(String): 下移, 默認(rèn)值'Down'

   API原型為:

4. 開發(fā)技巧:

   為了便于代碼管理及功能優(yōu)化, 將功能進(jìn)行了歸納, 大致可分為:

   縮放(zoom): 細(xì)分為放大和縮小,
   翻轉(zhuǎn)(rotate): 細(xì)分為順時(shí)針和逆時(shí)針,
   移動(dòng)(move): 細(xì)分為上|右|下|左平移.

   所以直接編寫三個(gè) '基類' (具體實(shí)現(xiàn)看源碼):
   izoom(zv): 提供圖片放大或縮小功能, zv為當(dāng)前縮放比,
   irotate(angle): 提供圖片旋轉(zhuǎn)功能, angle為當(dāng)前旋轉(zhuǎn)角度,
   imove(direction): 提供原圖平移功能, direction為移動(dòng)方向, 包括'left','up','right','down'.

   那么現(xiàn)在需要的就是細(xì)分各個(gè)功能:
  
   這里我使用了一個(gè)對(duì)象scissors來封裝這些操作, 使用call來 '繼承', 當(dāng)然你也可以使用 '冒充' 或者 '原型鏈' 這些手段來實(shí)現(xiàn). 這樣的話在綁定這些方法的時(shí)候使用eval和json就可以很輕松的完成:
  
   看不明白?那么貼上Html樹呢?
  

5. 自問自答

  Q: 為什么要在服務(wù)器端來實(shí)現(xiàn)旋轉(zhuǎn)效果?
  A: 為了實(shí)現(xiàn)大眾化和瀏覽器兼容, 所以我放棄了濾鏡和Canvas.

  Q: Photoshop等圖片處理軟件在裁剪時(shí)都是實(shí)現(xiàn)反相效果的, 為什么不實(shí)現(xiàn)?
  A: 我想一個(gè)程序兼顧UI的時(shí)候也要考慮效率, 如果實(shí)現(xiàn)反相的話, cutter對(duì)象內(nèi)同樣需要內(nèi)置一個(gè)img來與thumbimg同步, 那么當(dāng)旋轉(zhuǎn)圖象時(shí)內(nèi)存的累積是非常恐怖的.

  Q: 相比Flash, Siverlight而言這么一個(gè)東西有什么好處?
  A: 額, 其實(shí)我最初是打算用Flash做的, 不過考慮到大眾化的問題(多少.NET開發(fā)人員會(huì)as?), jQuery+HttpHandler是一個(gè)不錯(cuò)的選擇, 開放的API, 開放的源碼, 我想遠(yuǎn)比讓大家去改一個(gè).fla來的輕松愉快.

  Q: 那么壞處?
  A: 大家都知道, 瀏覽器的緩存是把雙刃劍, 在bitmapCutter里他就很煩人, 為了實(shí)現(xiàn)圖片旋轉(zhuǎn)后刷新, 只能為img的src加上一個(gè)戳(隨機(jī)數(shù)?時(shí)間?whatever..), 但是這樣會(huì)帶來一個(gè)必然的結(jié)果 - 瀏覽器內(nèi)存累積(目前已將此威脅降至最低 ;-)),   額..!@#$%

6. 注

  未對(duì)gif類型圖片作特殊處理, 所以僅會(huì)取回第一楨處理, 生成頭像格式為Png, 如果需要的話自己修改源碼.
  jquery.bitmapcutter.js 尾部方法為模擬  c# string.format, 必須的.
  支持鍵盤操作, 方向鍵控制平移, +-控制放大縮小, 不喜可從源碼刪除.

7. demo中的簡(jiǎn)單示例

  使用一張C.C的圖來截取頭像, 設(shè)置截取框長寬為120:120, 容器為id為container的div, 每次旋轉(zhuǎn)角度為90, 順時(shí)針旋轉(zhuǎn)功能按鈕的提示為 '順時(shí)針旋轉(zhuǎn){0}度.'
 
  效果:
 

8. 源碼包(測(cè)試圖片多):
    google code

NET技術(shù)：jQuery + HttpHandler 實(shí)現(xiàn)圖片裁剪，轉(zhuǎn)載需保留來源！

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。