by zhangxinxu from http://www.zhangxinxu.com
本文地址：http://www.zhangxinxu.com/wordpress/?p=359

可以看做废话的部分

一般来讲，图片的剪裁功能多用在生成缩略图以及生成头像。还在两三年前吧，剪裁这一功能还是较陌生的，例如人人网（原校内外）有些老用户的头像的尺寸可以说明这一点，那个时候剪裁技术少，未兴起，网站的头像是限定高度或宽度的，而没有像近几年这样限定高宽比例以及尺寸的，所以一些老用户的老头像的就是扁的。

使用限定大小的剪裁技术好处在于开发维护方便了，因为头像的尺寸统一了，我们做前端的有些事情就好办了。比如说，要给照片添加圆角投影效果，一旦照片尺寸固定，直接根据大小量身做一张圆角投影的背景图就可以了。例如下面开心网头像的圆角投影效果。

如果照片各个比例的都有，那么这个高宽固定的背景图片就显得捉襟见肘，碍手碍脚的。要想在各个比例图片下显示良好，则需要自适应技术，那需要的技术成本就高了。本文主要讲jQuery插件的，所以对于如何使用css实现自适应图片大小的圆角投影效果这里就不做说明了。

回到正题，要实现图片的剪裁，方法多种多样，例如目前人人网就是通过在一个大小限死的div格子内移动一个头像缩略图实现的，这样的好处是代码简单了很多，实现也容易了；开心网则通过移动大图与控制大图的显示比例实现头像剪裁的，好处在于易上手；而最近挺火的新浪微博的头像生成就是采用改变选区大小+终图预览方式实现，而本文要讲解的这款图片剪裁的jQuery插件Jcrop的效果表现就与新浪微博的一致，当然，从UI上来讲，要比新浪微博的舒服多了。（下图为新浪微博头像剪裁截图，请原谅我拿鄙人的陋照做演示）

其实，图片剪裁jQuery插件不少，但其中实现原理有差异，从HTML显示上讲，本文所演示的这个Jcrop插件是比较简单易懂的，其余一类插件的黑色半透明外围背景是通过上下左右四个<div>组装成了，其实无需如此麻烦，只需要上下两层图片，通过控制上层表现图片的大小和位移即可，而这款Jcrop插件就是如此实现的，如果您有兴趣，可以研究下实现原理的。也正由于这个原理，所以这款插件才有另外一个很有趣也实现的扩展功能——改变外围图片——其实就是将底层图片替换。

本文最关键的部分

我已经制作了非常详细的Demo演示与讲解页面，所以对于演示或讲解的重点不在本文，而在Demo上，本文可以说是一个leader，引导者，指引如何在最短的时间内消化与上手这款优秀的插件。

1、Demo页面共有7个页面，一个首页，起导航作用，链接至5个静态演示页面，以及一个php动态演示页面。每个具体的Demo页面都有一个回到首页的链接，方便跳转。

2、5个静态页面的复杂度，使用难易程度逐渐提升，方便循序渐进的掌握此插件，从最简单的类似”Hello,word!”程度的用法，到一些基本事件处理程度，再到初级、高级API的使用。源文件中JavaScript代码部分有比较详尽的中文注释，对照效果，相信很快就会上手的。

3、php动态页面演示了如何生成终缩略图，但是没有演示存储到数据库，一是必要性，而是安全。在此页面上，只要在大图上划定一个选区，单击“确认剪裁”按钮，就可以看到效果了。

您可以狠狠地单击这里：中文Demo实例页面 | 中文版源文件下载(有删改 .zip 149K)

额外补充的部分

关于此插件其他一些细节就不在这里叙述了，很多，不过Demo已经比较详尽的展示了这款插件，这里说多了，反而显得啰嗦。我已经提到过，图片剪裁的插件不止本文的Jcrop这一款，如果您觉得Jcrop不合您的胃口，您也可以试试下面两种图片照片剪裁插件：
1、Image Upload and Auto Crop
您可以单击这里： 项目主页 | Demo演示 | 打包下载(V1.2)
2、imgAreaSelect
您可以单击这里： 项目主页 | Demo演示 | 打包下载(v0.7)

最后的废话

我提供的源文件与原项目提供的源文件在形式上还是有不少差异的，不是单纯的英文换成中文，界面有改动，HTML代码，翻译，注释，JavaScript代码等都有改动。为了是更加方便的理解，生搬硬套是不可取的，本地化很重要。
然而，我初生小犊，才疏学浅，且时间仓促，所以在源文件中或demo上难免会出现书写，翻译甚至一些语句的错误，欢迎指正，也希望多多包涵。
Jcrop是款很不错的照片剪裁插件，希望我做的些工作能够对您的学习或是工作有所帮助。

本文为原创文章，转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=359

（本篇完）