jquery图片区域选择插件 jcrop使用方法

Jcrop是一款基于jquery图片裁剪插件，可以实现图片在线裁剪,达到和图像软件处理的效果,界面和操作也相当的人性化，只需要拖曳鼠标即可完成,部署到服务器也非常简单，在网站建设过程中轻易美化表单，并且改善用户体验，本文为您详细介绍了jcrop的部署及使用方法。


入门
?下载当前版本 
?放到页面相应的位置
?同时也需要加载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就可以激活了
//记得放在jQuery(window).load(...)内调用，否则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

//x1,y1表示左上角坐标，x2,y2表示右下角坐标，w,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>


注意 
?Text 必须有引号
?其他就不要有引号
?最后一个参数后面没有逗号