JavaScript图片裁剪

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="上载" οnclick="testUpload()" /> <br/>