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