最近工作又开忙了，今天要整一个头像裁剪脚本，想了想还是想到了亲爱的jQuery。做完后发现在移动的时候清晰图有一点点抖，不过不碍事。
这是一个基于jQuery UI的图像裁剪前端脚本。
利用Draggable和Resizable两个插件让虚线框可移动可缩放，并且设置相关参数移动界限、初始大小和位置、等比缩放、事件。
给大图加CSS透明度，于是它就灰了。虚线框内清晰图其实就是CSS背景background。以大图左上角为原点，计算出虚线框左上角的坐标offset（就叫坐标吧- -|）。虚线框的坐标值跟背景图position值刚好相反。当移动或缩放时计算一下，然后改变背景图的位置position，这样效果就出来了。
再说下预览图，首先预览图跟实际图是不一样大的，它们之间存在一个比率n（所设预览图大小除实际图大小）。前面已经计算过虚线框的坐标了，预览图的scrollTop和scrollLeft乘比率n刚好跟这个坐标值相等，当移动或缩放时计算一下，然后改变预览图的位置scrollTop和scrollLeft，这样效果就出来了。
当移动完或缩放完时顺便将虚线框的坐标和宽高记录到隐藏域传给后台程序，剩下工作归后台技术了。
有问题或建议可以给我留言
我收下了哈
有bug 拖着裁剪框乱晃几下 裁剪框就消失了。。。。
越来越有才啦！鲜花插进去……
感谢share.不错。
之前改过一款徐风弄的类似插件，俺回去翻翻
那些比例数据怎么得来的，比如说我想修改各个框的初始大小？然后走样了？
我想问下你的那个例子有么？怎么弄啊？加我QQ:502591263
这篇文里写得清楚了，再不懂我没办法 – -|
谢谢share,花匠的前端功力比较深入.
有以下一些问题:
1. css我希望能够统一放在global的css里面而不是页面的css中,结果我合并了border-left/border-right/border-top/border-bottom,发觉显示不正常
2. css中对imgCut的position指定是absolute,所以裁剪框的初始位置总是有问题,不知道为何.
3. 我对原文件的显示时机稍微一改动,resizable就出问题了,高和宽根本无法改变.
这个不错，很有用。
人挺帅的哈