|
jcrop原始下载页面猛击此处 基本使用方法如下 一在head部分(<head>和</head>之间)插入相关css和js文件 <link rel="stylesheet" href="css/jqueryJcropcss">
<script src="js/jqueryjs"></script>
<script src="js/jqueryJcropjs"></script> 二在head部分插入回调函数等相关处理参数 复制代码 代码如下:
<script language="Javascript">
<!
jQuery(function($){
// Create variables (in this scope) to hold the API and image size
var jcrop_api boundx boundy;
$(#cropbox)Jcrop({
minSize: []
maxSize:[]
setSelect: []
boxWidth:
borderOpacity:
keySupport:false
dragEdges:false
allowSelect:false
allowResize:false
bgOpacity:
boundary:
//allowMove:false
addClass: jcrophandle
onSelect: updateCoords
}
function(){
// Use the API to get the real image size
var bounds = thisgetBounds();
boundx = bounds[];
boundy = bounds[];
// Store the API in the jcrop_api variable
jcrop_api = this;
});
function updateCoords(c)
{
$(#x)val(cx);
$(#y)val(cy);
$(#w)val(cw);
$(#h)val(ch);
};
function checkCoords()
{
if (parseInt($(#w)val())) return true;
alert(请选择裁剪区域);
return false;
};
});
>
</script>三给相关图片加上id以便识别 <img id="cropbox" src="xjpg">
这样就能实现最简单的裁剪效果至于如何结合php等动态语句处理图片在置顶的文章里已经给出了示例 下表给出基本options参数设置
名称 | 默认值 | 说明 | allowSelect true 允许新选框 allowMove true 允许选框移动 allowResize true 允许选框缩放 trackDocument true baseClass "jcrop" 基础样式名前缀说明class="jcropholder"更改的只是其中的 jcrop addClass null 添加样式会例假设值为 "test"那么会添加样式到 class="test jcropholder" bgColor "black" 背景颜色颜色关键字HEXRGB 均可 bgOpacity 背景透明度 bgFade false 使用背景过渡效果 borderOpacity 选框边框透明度 handleOpacity 缩放按钮透明度 handleSize 缩放按钮大小 handleOffset 缩放按钮与边框的距离 aspectRatio 选框宽高比说明width/height keySupport true 支持键盘控制按键列表上下左右（移动）Esc（取消）Tab（跳出裁剪框到下一个） cornerHandles true 允许边角缩放 sideHandles true 允许四边缩放 drawBorders true 绘制边框 dragEdges true 允许拖动边框 fixedSupport true touchSupport null boxWidth 画布宽度 boxHeight 画布高度 boundary 边界说明可以从边界开始拖动鼠标选择裁剪区域 fadeTime 过度效果的时间 animationDelay 动画延迟 swingSpeed 过渡速度 minSelect [] 选框最小选择尺寸说明若选框小于该尺寸则自动取消选择 maxSize [] 选框最大尺寸 minSize [] 选框最小尺寸 onChange function(){} 选框改变时的事件 onSelect function(){} 选框选定时的事件 onRelease function(){} 取消选框时的事件 下表是api方法 名称 | 说明 | setImage(string) 设定（或改变）图像例jcrop_apisetImage("newpicjpg") setOptions(object) 设定（或改变）参数格式与初始化设置参数一样 setSelect(array) 创建选框参数格式为[xyxy] animateTo(array) 用动画效果创建选框参数格式为[xyxy] release() 取消选框 disable() 禁用 Jcrop说明已有选框不会被清除 enable() 启用 Jcrop destroy() 移除 Jcrop tellSelect() 获取选框的值（实际尺寸）例子consolelog(jcrop_apitellSelect()) tellScaled() 获取选框的值（界面尺寸）例子consolelog(jcrop_apitellScaled()) getBounds() 获取图片实际尺寸格式为[wh] getWidgetSize() 获取图片显示尺寸格式为[wh] getScaleFactor() 获取图片缩放的比例格式为[wh] |
