jquery + httphandler 实现图片裁剪...

　　序言:

　　上次发了几个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, -)),　　 额..!@#$%

　　6. 注

　　 未对gif类型图片作特殊处理, 所以仅会取回第一桢处理, 生成头像格式为Png, 如果需要的话自己修改源码.

　　 jquery.bitmapcutter.js 尾部方法为模拟　 c# string.format, 必须的.

　　 支持键盘操作, 方向键控制平移, +-控制放大缩小, 不喜可从源码删除.

　　7. demo中的简单示例

　　 使用一张C.C的图来截取头像, 设置截取框长宽为120:120, 容器为id为container的div, 每次旋转角度为90, 顺时针旋转功能按钮的提示为 '顺时针旋转{0}度.'

　　 效果:

　　8. 源码包(测试图片多):

　　http://code.google.com/p/bitmapcutter/downloads/list