jQuery + HttpHandler 实现图片裁剪(适用于论坛, SNS)

核心提示： 看不明白?那么贴上Html树呢? 图片看不清楚？请点击这里查看原图（大图），5. 自问自答 Q: 为什么要在服务器端来实现旋转效果? A: 为了实现大众化和浏览器兼容, 所以我放弃了滤镜和Canvas. Q: Photoshop等图片处理软件在裁剪时都是实现反相效果的, 为什么不实现?

看不明白?那么贴上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. 源码包(测试图片多):

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