jQuery + HttpHandler 实现图片裁剪适用于论坛 SNSWord下载.docx
《jQuery + HttpHandler 实现图片裁剪适用于论坛 SNSWord下载.docx》由会员分享，可在线阅读，更多相关《jQuery + HttpHandler 实现图片裁剪适用于论坛 SNSWord下载.docx（29页珍藏版）》请在冰豆网上搜索。
$.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）|jQueryObject）:
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）:
放大,默认值'
Zoomout'
zoomin（String）:
缩小,默认值'
Zoomin'
original（String）:
原始大小,默认值'
Originalsize'
clockwise（String）:
顺时针旋转,默认值'
Clockwiserotation（{0}degrees）'
需包含{0}以便格式化时使用rotateAngle值填充,
counterclockwise（String）:
逆时针旋转,默认值'
Counterclockwiserotation（{0}degrees）'
generate（String）:
生成头像,默认值'
Generate!
'
process（String）:
生成头像时的提示语,默认值为'
Pleasewait,transactionisprocessing......'
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.
Photoshop等图片处理软件在裁剪时都是实现反相效果的,为什么不实现?
我想一个程序兼顾UI的时候也要考虑效率,如果实现反相的话,cutter对象内同样需要内置一个img来与thumbimg同步,那么当旋转图象时内存的累积是非常恐怖的.
相比Flash,Siverlight而言这么一个东西有什么好处?
额,其实我最初是打算用Flash做的,不过考虑到大众化的问题（多少.Net开发人员会as?
）,jQuery+HttpHandler是一个不错的选择,开放的API,开放的源码,我想远比让大家去改一个.fla来的轻松愉快.
那么坏处?
大家都知道,浏览器的缓存是把双刃剑,在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.源码包（测试图片多）:
googlecode
/**
*
*Licensed
*UnderanAttribution,ShareAlikeLicense
*
*Copyright2008,2009Jericho[thisnamemeansnothing[at]]
**/
分类:
Web2.0,jQuery,DotNet
标签:
jquery,jquery插件,图片裁剪,图片处理
绿色通道：
好文要顶关注我收藏该文与我联系
Jericho
关注-0
粉丝-53
+加关注
7
1
（请您对文章做出评价）
«
博主前一篇：
json序列化日期的问题
»
博主后一篇：
jQuery插件开发-其实很简单
postedon2009-05-2715:
07Jericho阅读（11443）评论（92）编辑收藏
Comments
#1楼
zitsing
verygood,很牛
Posted@2009-05-2715:
11 回复 引用 查看
#2楼
杨芹勍
好屁屁呀~
12 回复 引用 查看
#3楼
lz辛苦，哥来给你捶捶背
#4楼[楼主]
Jericho
@杨芹勍
..........!
14 回复 引用 查看
#5楼
麦子&
#183;
君子兰
不错顶
42 回复 引用 查看
#6楼
NicholasYuen
我爱C.C.
:
）
47 回复 引用 查看
#7楼
hailibu
记下了，以后估计会用得着，先谢了！
Posted@2009-05-2716:
13 回复 引用 查看
#8楼
楚广明
很强，以后用的上，谢谢了。
15 回复 引用 查看
#9楼
MicroCoder
mark
28 回复 引用 查看
#10楼
别爱上哥，哥只是个传说！
直接顶楼主菊花!
!
35 回复 引用 查看
#11楼
yibin
太厉害了
如果可以直接在图片区域进行图片拖动操作就更好了
38 回复 引用 查看
#12楼
MyCoolDog
mark一下
#13楼[楼主]
@别爱上哥，哥只是个传说！
........
园子里兄弟品位都很独特。
。
@yibin
这个吗，为了效率牺牲了，不过你这么厉害自己可以加的。
将$img内置到一个div里，将此div宽高与$img的宽高同步就可以了。
img直接拖拽的话别的浏览器是可以的，Firefox中会与自身的超级拖拽插件冲突@@。
44 回复 引用 查看
#14楼
深山老林
谢谢楼主的分享。
45 回复 引用 查看
#15楼
lz.......--引用--------------------------------------------------
直接顶楼主菊花!
--------------------------------------------------------
志同道合
55 回复 引用 查看
#16楼
jaytian
支持楼主！
谢谢！
分享！
Posted@2009-05-2717:
07 回复 引用 查看
#17楼
大头虾
牛B啊！
LZ谢谢你的分享哦。
26 回复 引用
#18楼
︶ㄣ木べ头
厉害厉害，好东西啊
34 回复 引用 查看
#19楼
KenBlove
做得很好~喜欢!
40 回复 引用 查看
#20楼
上不了岸的鱼
支持一把，顺便留个标记
Posted@2009-05-2718:
18 回复 引用 查看
#21楼
大力bober
确实强大!
Posted@2009-05-2720:
26 回复 引用 查看
#22楼
楼主.我把你的代码加到MVC的项目里.点击后出现
cantgenerateit!
Pleasewait,transactionisprocessing......
请问会是什么错误.我添加了WEB.CONFIG的配置.其它移动什么的都对了.
还一个小问题,scissors.axd是自动生成的还是必须要有?
谢谢分享!
Posted@2009-05-2721:
#23楼[楼主]
@大力bober
AJAX调用服务器端HttpHandler生成头像时出现了错误，
scissors.axd是web.config中配置的一个httpHandler，
用来响应客户端请求，确认你配置的是正确的（命名空间和dll名称）.如果你将BitmapCutter.Core中的服务器端处理方法添加到了自己的项目中的话，那么需要在web.config中做正确的httpHandler节点配置（type属性）.
50 回复 引用 查看
#24楼[楼主]
额，等了你好久。
我直接建了个Mvc的项目，加入了bitmapCutter,同样发在googlecode上了（与bitmapcutterurl相同），你直接下来看看吧。
早点休息，准备欧冠^^!
Posted@2009-05-2722:
33 回复 引用 查看
#25楼
RubyPDF
很强大，我想要的功能还有contrast，另外crop是不限制大小，也就是说是在线的图片编辑功能，希望能与我联系，谢谢！
54 回复 引用 查看
#26楼
再接再厉[未注册用户]
正要用，好好研究下，谢谢分享！
Posted@2009-05-2723:
52 回复 引用
#27楼
@Jericho
非常感谢楼主，这么晚还给我回复．我就是要准备欧冠才提前睡觉了．
谢谢你
我再测试你的ＤＥＭＯ后给你消息！
端午快乐！
Posted@2009-05-2810:
#28楼
cxz0924
觉得没必要这么麻烦，呵呵，还是顶了
Posted@2009-05-2812:
23 回复 引用 查看
#29楼
混世者
太猛了，正想学学jquery的东西，很好呀，收藏
Posted@2009-05-2818:
03 回复 引用 查看
#30楼
ddda
不错，学习了
05 回复 引用 查看
#31楼
大李
效果不错，学习啦。
Posted@2009-05-2911:
#32楼
airwolf2026
支持一个.另外字体大些就好啦.
Posted@2009-06-0109:
29 回复 引用 查看
#33楼
xiaohe[未注册用户]
这是vs2008吧，有没有2005的呢，谢谢了。
Posted@2009-06-1909:
23 回复 引用
#34楼[楼主]
@xiaohe
Hi,其实项目文件没有使用3.0+的东西，你可以直接移植到vs2005.
Posted@2009-06-1910:
#35楼
现在可以浏览了，可是在我旋转的时候会报错。
弹出提示框错误：
AgenericerroroccuredinGDI+.
Posted@2009-06-1911:
30 回复 引用
#36楼[楼主]
你可以自己跟踪调试下，确认ajax配置及image路径是否正确。
32 回复 引用 查看
#37楼
谢谢楼主，告诉我你的qq号，我加你吧。
我这个没有办法移植啊。
48 回复 引用
#38楼
谢谢楼主的回复，我把它移植到2005了，用iis看还是那个错误：
AgenericerroroccuredinGDI+,但是在2005环境下调试就是正常的，请问这是怎么回事？
Posted@2009-06-1912:
#39楼[楼主]
我给你邮箱发邮件了，请查收。
ps:
确保iis为用户分配了可写权限。
56 回复 引用 查看
#40楼
小罗罗[未注册用户]
楼主太强了，
楼主能否提供一份可以拖动鹰眼大小的js源代码
Posted@2009-06-2616:
22 回复 引用
#41楼
励冰
好东东啊,好东东.
现在的网络变态了,
在网上一找,基本上都是转载的楼主的.
Posted@2009-07-0314:
#42楼
为什么在旋转的时候提示"
GDI+中发生一般性错误!
"
#43楼[楼主]
@励冰
你设下断点debug一下吧，可能是图片路径的问题；
Posted@2009-07-0315:
01 回复 引用 查看
#44楼
simon01[未注册用户]
@Jericho
为什么开发环境下,可以通过,发布后就不行了.cantgenerateit!
Posted@2009-07-1611:
43 回复 引用
#45楼[楼主]
@simon01
win7vs-08-sp1.net3.5
你可以自己跟踪调试下，看是否是图片路径引发的异常。
Posted@2009-07-1612:
06 回复 引用 查看
#46楼
dream102[未注册用户]
有个问题想请教下！
图片是如何保存的呢？
找了好久也没有找到在那里保存的,
我想和数据库挂钩！
先谢谢了
Posted@2009-07-1614:
45 回复 引用
#47楼
保存图片的同时，把图片的信息也同时添加到数据库内！
谢谢楼主，
50 回复 引用
#48楼
simon02[未注册用户]
你好,我测试了一下,发现在IIS6下正常,在IIS7下引发导常.文件夹权限都设置了.不知这是为什么?
@dream102
说的把图片保存在数据库里想法不错.我是这样实现的,保存图片的同时，用JS获得图片路径,在读取存到数据库.有些麻烦.在Jericho实现的dll里,已经读取了一次图片,但直接存入数据库还有些困难.希望Jericho实现!
Posted@2009-07-1620:
33 回复 引用
#49楼[楼主]
@simon02
hi,iis7我测试了，完全可以用，我的环境是win77100.
请确认为users用户赋予可写权限，并且应用程序池版本正确（我使用的Classic.NETAppPool）。
dream102的问题我已帮她解决，自己直接在
升级会员 