您的位置:首页 > Web前端 > JQuery

Jcrop-jquery图片裁剪插件

2012-03-23 22:56 295 查看


来看下其使用方法:

关键的图片的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()方法。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: