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

其中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

NET技術：jQuery + HttpHandler 實現圖片裁剪，轉載需保留來源！

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。