
如果有用过www.gravatar.com的头像的话就知道,该网站带有一个强大的图片裁剪功能,而这个功能就是使用Jcrop实现的。这是一个值得使用的插件,带有完备的API,你可以非常自由的使用其中的功能。压缩包带有5个demo,其中第五个demo要多把玩下。
来看下其使用方法:
关键的图片的html代码是免不了
- <img src="demo_files/sago.jpg" id="cropbox" />
值得一提的是,插件运行后,会将此图片隐藏,复制出2个图片,一张作为背景,而另外一张放在裁剪层。而背景层图片是可以指定的,并非一定要同一张图片,具体参见第5个demo。
来看其javascript代码
- jQuery(function(){
- var jcrop_api = jQuery('#cropbox').Jcrop();
- });
这是最为简单的形式,可满足基础需求,当然Jcrop还有很多参数和函数供灵活使用。
我引用demo5,来简单说明下。
- setSelect():显示并设置特定尺寸的裁剪层
- animateTo():以动画的形式将裁剪层移动到某坐标,同时也可改变裁剪层大小
- release():隐藏裁剪层
- setOptions():是配置Jcrop属性,接受的是对象字面量参数,包含是否允许拖动、缩放、重绘等,详见demo5,值得一提的是,如果重新设置了其选项,后面务必调用focus()方法。

你的链接已经添加,多多交流!
看帖 回帖是一种美德 谢谢分享