jQuery图片剪裁插件 Jcrop

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

特点:

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

1

入门
下载当前版本
•放到页面相应的位置
•同时也需要加载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>

 

2

 

欢迎关注下方“非著名资深码农“公众号进行交流~

发表评论

邮箱地址不会被公开。