好不容易完成了一个基于web2.0概念的项目管理系统，在系统的实现过程中用到了头像的缩放裁剪的功能模块，而且我发现在网络上很少有讨论这方面的文章，所以把我的实现方式贴出来，和大家分享一下，写的不好还请多多海涵。
我是用jquery ui的ui.draggable实现的。当然，本文所实现的方法不局限于jquery ui，只要能实现拖动的功能，任何库都可以。我用的jquery ui的版本号是1.6，这个版本已经改了很多的bug，渐趋完善，老实说以前的有些版本代码bug非常多，现在代码质量有了一定的提高，尤其bug改了不少。这个ui库完全兼容jquery的语法，也就是说隐式迭代、超级强大的selector等都可以无缝的使用，这比起dojo，ext等组件库使用起来要更为方便和轻量些。具体的使用情况如下：
|
(1)、初始状况： |
(2)、 缩放后：
|
(3)、 截取效果：
1、图片处理后台代码
要实现缩放和截取必须要知道原图片的width/height、缩放后后的图片实际的width/height、截取框的width/height和应截取距离左边(left)和顶部(TOP)的距离,代码如下，都加了注释了，不过这方面的代码网络上多的是。
2、前台具体实现
那么我们应该怎样获取这几个重要参数？各位看看头像截取模块的示例图就知道了
为了实现上面的效果，页面的结构如下。
样式如下：
Content本身为相对定位，content内的元素互相叠加,而且，在截取框里外都有个image和div，拖动外面的图片（其实是div）则截取框内的图片也按比例在div里移动。拖动里面的也是同样的道理。只要把上面代码中的所标注的几个参数取出来用后台方法进行截取出来就OK了，老实说，代码并没什么难点，有的话也在主要还是对图形的计算上比较麻烦，让我想起了以前做平面几何还有应用题时的情况
拖动的代码如下，非常的简单，关于ui的使用方法各位可以看看jquery的网站。
javascript代码
而缩放的功能也是运用了jquery ui的拖动功能，按移动的比例计算，并将放大的比例存在textbox中，不过在进行截取时并不需要知道它的值，只要知道放大缩小后的图片的高宽。尤其要注意的是后台的代码只接受int而不能是float，所以在给页面做缩放的时候要把缩放后的图片高宽进行强制转换为int。
缩放功能条：
方便vs2005的朋友使用 .net 2.0版代码下载
总结：
由于刚完成的项目涉及到很多ajax应用，个人觉得web前台的分离尤其重要：Javascript由当年的验证表单功能发展到如今各种匪夷所思的ajax应用，为了实现大规模，可维护，可修改的开发，必须始终贯彻页面行为、结构、表现三者分离的原则，也就是实现javascript、html、css三者的分离。所以将css写入页面内，或者在页面标签里注册事件都是和分离原则相背离的，在项目的前期由于在repeater等模板化控件中用了很多传统的绑定方式，使得整个页面非常的肮脏，到处都是注册的代码，看的人头都晕了，需求一变更，改起页面会让人有砸电脑的冲动（说真的）。
---------分离原则的论述大家可以看看《ppk on javascipt》和《javascript dom高级编程这两本书》，虽然很多人推荐《javascript高级编程》，但是我个人看过后觉得zakas的这本成书时间太早，和当下的最佳实践都有所背离，上面那两本反倒更值得推荐。