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

其中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的控制.