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()方法。
相关文章推荐
- jquery 头像(图片)拖动裁剪插件Jcrop
- JQuery 图像裁剪插件Jcrop实现图片上传功能(mysql DB)
- 在线裁剪图片jquery插件Jcrop - 中文文档
- JQuery Jcrop 实现图片裁剪的插件
- Jcrop_jQuery图片裁剪插件
- JQuery Jcrop 实现图片裁剪的插件
- jquery插件图片裁剪jcrop
- jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享
- jQuery-图片上传裁剪插件--imgAreaSelect(分析三) 如何获得选择域的图像信息
- Jcrop插件+Canvas实现图片上传预览+图片裁剪上传
- jquery.Jcrop结合JAVA后台实现图片裁剪上传实例
- jQuery 图像裁剪插件Jcrop的简单使用
- 上传、裁剪图片-----Jcrop图片裁剪插件
- jQuery 图像裁剪插件Jcrop的简单使用
- imgAreaSelect插件实现图片裁剪 用的Jquery不能超过1.9
- jquery插件合集之图片裁剪
- java实现图片处理之Jcrop 图像裁剪插件
- 利用jquery的imgAreaSelect插件实现图片裁剪示例
- 利用jquery的imgAreaSelect插件实现图片裁剪示例
- 几个jQuery的图片裁剪插件