知识大全 jcrop基本参数一览

Posted 2022-07-20 知

篇首语：愚昧从来没有给人带来幸福；幸福的根源在于知识。本文由小常识网(cha138.com)小编为大家整理，主要介绍了知识大全 jcrop基本参数一览相关的知识，希望对你有一定的参考价值。

　　jcrop原始下载页面猛击此处

　　基本使用方法如下

　　一在head部分(<head>和</head>之间)插入相关css和js文件

　　二在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: jcrop handle onSelect: updateCoords function() // Use the API to get the real image size var bounds = this getBounds(); boundx = bounds[ ]; boundy = bounds[ ]; // Store the API in the jcrop_api variable jcrop_api = this; ); function updateCoords(c) $( #x ) val(c x); $( #y ) val(c y); $( #w ) val(c w); $( #h ) val(c h); ; function checkCoords() if (parseInt($( #w ) val())) return true; alert( 请选择裁剪区域 ); return false; ; ); > </script>

　　三给相关图片加上id以便识别

　　<img id="cropbox" src=x jpg> 这样就能实现最简单的裁剪效果至于如何结合php等动态语句处理图片在置顶的文章里已经给出了示例

　　下表给出基本options参数设置

名称默认值说明 allowSelect true 允许新选框 allowMove true 允许选框移动 allowResize true 允许选框缩放 trackDocument true baseClass "jcrop" 基础样式名前缀说明更改的只是其中的 jcrop addClass null 添加样式会例假设值为 "test" 那么会添加样式到 bgColor "black" 背景颜色颜色关键字 HEX RGB 均可 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() 取消选框时的事件名称说明 setImage(string) 设定（或改变）图像例 jcrop_api setImage("newpic jpg") setOptions(object) 设定（或改变）参数格式与初始化设置参数一样 setSelect(array) 创建选框参数格式为 [x y x y ] animateTo(array) 用动画效果创建选框参数格式为 [x y x y ] release() 取消选框 disable() 禁用 Jcrop 说明已有选框不会被清除 enable() 启用 Jcrop destroy() 移除 Jcrop tellSelect() 获取选框的值（实际尺寸）例子 console log(jcrop_api tellSelect()) tellScaled() 获取选框的值（界面尺寸）例子 console log(jcrop_api tellScaled()) getBounds() 获取图片实际尺寸格式为 [w h] getWidgetSize() 获取图片显示尺寸格式为 [w h] getScaleFactor() 获取图片缩放的比例格式为 [w h] cha138/Article/program/Java/JSP/201311/20605