Jcrop-jquery图片裁剪插件

 

来看下其使用方法：

关键的图片的html代码是免不了

1 <img src="demo_files/sago.jpg" id="cropbox" />

值得一提的是，插件运行后，会将此图片隐藏，复制出2个图片，一张作为背景，而另外一张放在裁剪层。而背景层图片是可以指定的，并非一定要同一张图片，具体参见第5个demo。

来看其javascript代码

1 jQuery(function(){
2             var jcrop_api = jQuery('#cropbox').Jcrop();
3         });

这是最为简单的形式，可满足基础需求，当然Jcrop还有很多参数和函数供灵活使用。
我引用demo5，来简单说明下。

1. setSelect():显示并设置特定尺寸的裁剪层
2. animateTo():以动画的形式将裁剪层移动到某坐标，同时也可改变裁剪层大小
3. release():隐藏裁剪层
4. setOptions():是配置Jcrop属性，接受的是对象字面量参数，包含是否允许拖动、缩放、重绘等，详见demo5，值得一提的是，如果重新设置了其选项，后面务必调用focus()方法。

转载于:https://www.cnblogs.com/kopheece/archive/2012/03/23/2414396.html