jQuery Jcrop 图像裁剪
来源：CNBLOGS 发布时间： 2017-02-08 作者：网友 浏览次数：
JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需要定义id即可。
摘要: Jcrop 是一个功能强大的 jQuery 图像裁剪插件，结合后端程序（例如：PHP）可以快速的实现图片裁剪的功能。 版本： jQuery v1.5...
Jcrop 是一个功能强大的 jQuery 图像裁剪插件，结合后端程序（例如：PHP）可以快速的实现图片裁剪的功能。
在线实例实例预览 jQuery Jcrop 图像裁剪插件 Hello World 基础示例
实例预览 jQuery Jcrop 图像裁剪插件 Basic Handler 事件处理
实例预览 jQuery Jcrop 图像裁剪插件按高宽比例预览裁剪效果
实例预览 jQuery Jcrop 图像裁剪插件 Animation / Transitions 动画/过度效果
实例预览 jQuery Jcrop 图像裁剪插件 API 示例
实例预览 jQuery Jcrop 图像裁剪插件 CSS 样式
实例预览 Jcrop 图像裁剪插件 Non-image Cropping 非图片裁剪
一个服务端PHP程序裁剪的示例
实例预览 jQuery Jcrop 使用PHP图像裁剪实例
使用方法载入 CSS 文件 载入 JavaScript 文件
名称 默认值 说明
allowSelect true 允许新选框
allowMove true 允许选框移动
allowResize true 允许选框缩放
trackDocument true 拖动选框时，允许超出图像以外的地方时继续拖动。
baseClass 'jcrop' 基础样式名前缀。说明：class="jcrop-holder"，更改的只是其中的 jcrop。
例：假设值为 "test"，那么样式名会更改为 "test-holder"
addClass null 添加样式。
例：假设值为 "test"，那么会添加样式到class="jcrop-holder test"
bgColor 'black' 背景颜色。颜色关键字、HEX、RGB 均可。
bgOpacity 0.6 背景透明度
bgFade false 使用背景过渡效果
borderOpacity 0.4 选框边框透明度
handleOpacity 0.5 缩放按钮透明度
handleSize 9 缩放按钮大小
aspectRatio 0 选框宽高比。说明：width/height
keySupport true 支持键盘控制。按键列表：上下左右（移动选框）、Esc（取消选框）
createHandles ['n','s','e','w','nw','ne','se','sw'] 设置边角控制器
createDragbars ['n','s','e','w'] 设置边框控制器
createBorders ['n','s','e','w'] 设置边框
drawBorders true 绘制边框
dragEdges true 允许拖动边框
fixedSupport true 支持 fixed，例如：IE6、iOS4
touchSupport null 支持触摸事件
shade null 使用更好的遮罩
boxWidth 0 画布宽度
boxHeight 0 画布高度
boundary 2 边界。说明：可以从边界开始拖动鼠标选择裁剪区域
fadeTime 400 过度效果的时间
animationDelay 20 动画延迟
swingSpeed 3 过渡速度
minSelect [0,0] 选框最小选择尺寸。说明：若选框小于该尺寸，则自动取消选择
maxSize [0,0] 选框最大尺寸
minSize [0,0] 选框最小尺寸
onChange function(){} 选框改变时的事件
onSelect function(){} 选框选定时的事件
onDblClick function(){} 在选框内双击时的事件
onRelease function(){} 取消选框时的事件
API 接口名称 说明
setImage(string) 设定（或改变）图像。例：jcrop_api.setImage('newpic.jpg')
setOptions(object) 设定（或改变）参数，格式与初始化设置参数一样
setSelect(array) 创建选框，参数格式为：[x, y, x2, y2]
animateTo(array) 用动画效果创建选框，参数格式为：[x, y, x2, y2]
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]
下载
顶
踩
相关文章
精彩导读
热门资讯
关注我们
