1.jquery 图片裁剪库选择

Jcrop：http://deepliquid.com/content/Jcrop.html

imgareaselect：http://odyniec.net/projects/imgareaselect/

CropZoom：https://github.com/cropzoom/cropzoom

可供选择的jQuery插件非常多，这里选择 imgareaselect 进行详细演示

2.综合演示效果

2.1 左侧区域是 div + img 标签，用来展示原图，具体需求

（1）左侧展示用户上载的原图，原图可以超大，可以超小。大图就等比例压缩展示，小图不压缩

（2）左侧区域最大宽度是 608px，这个参数要求可以定制！

（3）左侧裁剪，要求按照【右侧预览区域的高宽比】进行裁剪

2.2 右侧区域也是 div + img 标签，用来展示【裁剪部分】的预览图

（1）预览区域的高宽是 608*304 ，要求可以定制

（2）左侧裁剪部分的图在这里全屏体现出来

这样的要求其实是从用户体验出发的，保证了效果：

（1）原图不管多大多小，都会按照原图比例展示出来

（2）左侧区域最大宽度固定，这样左侧不会过宽，【导致右侧预览没地方】

但是要注意，如果用户上载很小的图，并且【裁剪的部分】本身就小于【预览的高宽】

那么会等比例拉伸展示，其实可以做到不拉伸，但是这样的话就影响了整体页面布局！

上述参数指标应该说非常详细了，提供了 原图、左侧展示图、裁剪区、右侧预览图的指标

并且根据【左侧展示图】+【原图】+【裁剪区坐标】计算出来在原图上裁剪点坐标

这样方便后台对原图进行真实裁剪！

3、二次封装与实现

（1）支持计算各种坐标的回调函数

（2）支持左侧、右侧 各种指标的定制

（3）支持图片加载完成才开始出现效果

防止用户上载超大图，图片还没加载完成就调用imgAreaSelect的方法，导致在某些浏览器里面没有效果

官方提供的简单示例，在遇到上载超大图，比如10M图片时，其实都有问题。

先来看看html代码，非常简单

	<input type="button" value=http://www.mamicode.com/"上载" onclick="testUpload()" /> 
>

再来看看如何调用
<title>图片裁剪</title>	<link rel="stylesheet" type="text/css" href=http://www.mamicode.com/"/staticfile/imgselect/css/imgareaselect-default.css" />>
注意到：调用 initImgSelectedArea 方法即可，传一个json对象。要求位json对象提供几个参数和回调函数，其中回调函数是可选的！
这个方法就是在  imgSelectedArea.js 定义的
最后来看看imgSelectedArea.js文件
/** * 图片裁剪 *  * @param initObj{ * 		leftDiv:左侧div容器 * 		rightDiv：右侧div容器 * 		imgSrc：原图的地址 * 		preWidth：右侧预览图要求的宽度 * 		preHeight：右侧预览图要求的高度 * 		getImgInfo：返回原图、左侧最终展示图的高宽的回调函数 * 		getAreaInfo：返回左侧裁剪区域坐标、高宽，以及映射到原图上的坐标 * } * @returns {succeed:(true|false),msg:'处理结果'} *  * @author yli */function initImgSelectedArea(initObj) {	if (initObj) {		var leftDiv = initObj.leftDiv || undefined;		var rightDiv = initObj.rightDiv || undefined;		var imgSrc = http://www.mamicode.com/initObj.imgSrc || undefined;>

4、代码下载
 http://cloud.suning.com/cloud-web/share/link.htm?sk=aaacTU
JavaScript图片裁剪