jQuery图片剪裁插件 Jcrop

标签: jquery 图片 插件 | 发表时间:2012-06-29 10:13 | 作者:孟晨
出处:http://www.cnblogs.com/

Jcrop是一个jQuery插件,它能为你的WEB应用程序快速简单地提供图片裁剪的功能。

特点:

  • 对所有图片均unobtrusively(无侵入的,保持DOM简洁)
  • 支持宽高比例锁定
  • 支持 minSize / maxSize设置
  • 支持改变选区或移 动选区时的回调(Callback)
  • 支持用键盘微调选 区
  • 通过API创建互 动,比如动画效果
  • 支持CSS样式

入门
下载当前版本 
•放到页面相应的位置
•同时也需要加载jquery

加载顺序
•jQuery.js
•Jcrop.js
•Jcrop CSS样式
如:
<script src="js/jquery.pack.js"></script>
<script src="js/jquery.Jcrop.pack.js"></script>
<link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />
注意:你也可以调整成其他的位置

调用 
假如:<img src="flowers.jpg" id="cropbox" />
编写以下脚本
<script language="Javascript">
jQuery(function() {
jQuery('#cropbox').Jcrop();
});
</script>
Jcrop就可以激活了

事件处理
Jcrop有2个主要的事件处理程序 onChange 和 onSelect.
onSelect callback 选择完成后调用 
onChange callback 选框移动(或者说改变)时调用
定义一个事件出来函数
<script language="Javascript">
function showCoords(c)
{
// variables can be accessed here as
// c.x, c.y, c.x2, c.y2, c.w, c.h
};
</script>
然后附加上去
<script language="Javascript">
jQuery(function() {
jQuery('#cropbox').Jcrop({
onSelect: showCoords,
onChange: showCoords
});
});
</script>
这是一个标准的jquery语法,注意最好一个属性后面没有逗号

设置选项
参数名称 类型 描述 默认 
aspectRatio decimal 设定宽高比 n/a 
minSize array [ w, h ] 设置最小尺寸 n/a 
maxSize array [ w, h ] 设置最大尺寸 n/a 
setSelect array [ x, y, x2, y2 ] 设置一个初选框的位置 n/a 
bgColor color value 设置背景容器颜色 'black' 
bgOpacity decimal 0 - 1 设置当图像被裁剪选框外的透明度 .6
如:

<script language="Javascript">
jQuery(function() {
jQuery('#cropbox').Jcrop({
onSelect: showCoords,
bgColor: 'black',
bgOpacity: .4,
setSelect: [ 100, 100, 50, 50 ],
aspectRatio: 16 / 9
});
});
</script>

 

 

作   者: 孟晨
出   处: http://www.cnblogs.com/xiaoyao2011/
个人站:   http://www.coderidea.com/
欢迎任何形式的转载,但请务必注明出处。

本文链接

相关 [jquery 图片 插件] 推荐:

jQuery图片剪裁插件 Jcrop

- - 博客园_首页
Jcrop是一个jQuery插件,它能为你的WEB应用程序快速简单地提供图片裁剪的功能. 对所有图片均unobtrusively(无侵入的,保持DOM简洁). 支持 minSize / maxSize设置. 支持改变选区或移 动选区时的回调(Callback). 通过API创建互 动,比如动画效果.

jQuery 图片播放插件 FancyBox 和其 WordPress 插件

- Outman - 我爱水煮鱼
FancyBox 是一个 jQuery 图片播放插件,它可以使用类似于 MAC 系统中 “Lightbox” 方式在网页前面浮动显示和播放图片,网页内容,或者其他多媒体内容. 支持图片,HTML 元素,Flash 动画,Iframe 以及 AJAX 支持. 可以自定义播放器和 CSS 样式. 如果加载了鼠标滚动插件(mouse wheel plugin),FancyBox 还支持通过鼠标滚动事件来翻阅图片.

jquery 插件

- - JavaScript - Web前端 - ITeye博客
 jQuery插件的开发包括两种:. 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法. jQuery的全局函数就是属于jQuery命名空间的函数,另一种是对象级别的插件开发,即给jQuery对象添加方法. 下面就两种函数的开发做详细的说明. 1 、类级别的插件开发.

精于图片处理的10款jQuery插件

- DayuLu - UED TEAM,用户体验设计,web前端开发
这篇文章将重点介绍用于图片处理的10个超级jQuery插件,可以生成图片的动画和特效,缩放图片大小等等. 这个插件非常有趣,可以用来缩放图片,旋转对象(3D特效). 可以用来变换图片:旋转,变换倾斜角度,调整图片大小(通常情况下可以和DIV共用). 这个插件可以用来对比两张图片的前后变化. 这个插件可以把你的文字情绪转化成笑脸表情(纯粹的CSS,没有图片).

用于图片处理的10个超级jQuery插件

- M.Li - ITeye资讯频道
这篇文章将重点介绍用于图片处理的10个超级jQuery插件,可以生成图片的动画和特效,缩放图片大小等等. 这个插件非常有趣,可以用来缩放图片,旋转对象(3D特效). 可以用来变换图片:旋转,变换倾斜角度,调整图片大小(通常情况下可以和DIV共用). 这个插件可以用来对比两张图片的前后变化. 这个插件可以把你的文字情绪转化成笑脸表情(纯粹的CSS,没有图片).

延迟加载图片的 jQuery 插件:Lazy Load

- - 我爱水煮鱼
网站的速度非常重要,现在有很多网站优化的工具,如 Google 的 Page Speed,Yahoo 的 YSlow,对于网页图片,Yahoo 还提供 Smush.it 这个工具对图片进行批量压缩,但是对于图片非常多的网站,载入网页还是需要比较长的时间,这个时候我们可以使用 Lazy Load 这个 jQuery 插件来延迟加载图片.

jQuery 图片放大镜效果插件:jQZoom

- - 我爱水煮鱼
在一些产品演示网站,常常需要这样的效果,把鼠标移到小图的上面,旁边出现这这部分的放大效果,通过这种方式让用户能够详细了解产品的细节. jQZoom 就是这样的一个 jQuery 插件,它能够让你网站的图片实现放大镜效果,把鼠标移到小图上,旁边出现大图的局部放大的部分,如下演示:. RSS 用户需要返回页面才能看到效果.

最佳6款用于移动网站开发的 jQuery 图片滑块插件

- - 博客园_梦想天空
  随着智能手机的普及,越来越多的用户喜欢通过手机中浏览网页. 今天这篇文章为大家推荐最佳6款用于移动应用的. jQuery 图片滑块插件,这些插件很好的处理了触屏事件,效果平滑,帮助你构建用户体验良好的移动网站. PhotoSwipe 是一款免费的. jQuery 图片库插件,支持 iPhone, iPad, Android, Blackberry 等各种移动设备.