【插件】jQuery Jcrop 图像裁剪

jquery tytrock ⋅ 于 2017-11-11 15:16:35 ⋅ 2347 阅读

Jcrop 是一个功能强大的 jQuery 图像裁剪插件,结合后端程序(例如:PHP)可以快速的实现图片裁剪的功能。


使用方法:


载入 CSS 文件

<link rel="stylesheet" href="jquery.Jcrop.css">

载入 JavaScript 文件

<script src="jquery.js"></script><script src="jquery.Jcrop.js"></script>

给 IMG 标签加上 ID

<img id="element_id" src="pic.jpg">

调用 Jcrop

$('#element_id').Jcro


参数说明:


名称默认值说明
allowSelecttrue允许新选框
allowMovetrue允许选框移动
allowResizetrue允许选框缩放
trackDocumenttrue拖动选框时,允许超出图像以外的地方时继续拖动。
baseClass'jcrop'基础样式名前缀。说明:class="jcrop-holder",更改的只是其中的 jcrop。

例:假设值为 "test",那么样式名会更改为 "test-holder"

addClassnull添加样式。

例:假设值为 "test",那么会添加样式到class="jcrop-holder test"

bgColor'black'背景颜色。颜色关键字、HEX、RGB 均可。
bgOpacity0.6背景透明度
bgFadefalse使用背景过渡效果
borderOpacity0.4选框边框透明度
handleOpacity0.5缩放按钮透明度
handleSizenull缩放按钮大小
aspectRatio0选框宽高比。说明:width/height
keySupporttrue支持键盘控制。按键列表:上下左右(移动选框)、Esc(取消选框)
createHandles['n','s','e','w','nw','ne','se','sw']设置边角控制器
createDragbars['n','s','e','w']设置边框控制器
createBorders['n','s','e','w']设置边框
drawBorderstrue绘制边框
dragEdgestrue允许拖动边框
fixedSupporttrue支持 fixed,例如:IE6、iOS4
touchSupportnull支持触摸事件
shadenull使用更好的遮罩
boxWidth0画布宽度
boxHeight0画布高度
boundary2边界。说明:可以从边界开始拖动鼠标选择裁剪区域
fadeTime400过度效果的时间
animationDelay20动画延迟
swingSpeed3过渡速度
minSelect[0, 0]选框最小选择尺寸。说明:若选框小于该尺寸,则自动取消选择
maxSize[0, 0]选框最大尺寸
minSize[0, 0]选框最小尺寸
onChangefunction() {}选框改变时的事件
onSelectfunction() {}选框选定时的事件
onDblClickfunction() {}在选框内双击时的事件
onReleasefunction() {}取消选框时的事件


API 接口:

var jcropApi;
$('#element_id').Jcrop({
  allowSelect: true,
  baseClass: 'jcrop'}, function() {
  jcropApi = this;
});


名称说明
setImage(string, callback)设定(或改变)图像。例:jcropApi.setImage('newpic.jpg')
setOptions(object)设定(或改变)参数,格式与初始化设置参数一样
setSelect(array)创建选框,参数格式为:[x, y, x2, y2]
animateTo(array, callback)用动画效果创建选框,参数格式为:[x, y, x2, y2]
release()取消选框
disable()禁用 Jcrop。说明:已有选框不会被清除。
enable()启用 Jcrop
destroy()移除 Jcrop
tellSelect()获取选框的值(实际尺寸)。例:console.log(jcropApi.tellSelect())
tellScaled()获取选框的值(界面尺寸)。例:console.log(jcropApi.tellScaled())
getBounds()获取图片实际尺寸,格式为:[w, h]
getWidgetSize()获取图片显示尺寸,格式为:[w, h]
getScaleFactor()获取图片缩放的比例,格式为:[w, h]

相关信息:


回复数量: 0
    暂无评论~~
    • 请注意单词拼写,以及中英文排版,参考此页
    • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`, 更多语法请见这里 Markdown 语法
    • 支持表情,使用方法请见 Emoji 自动补全来咯,可用的 Emoji 请见 :metal: :point_right: Emoji 列表 :star: :sparkles:
    • 上传图片, 支持拖拽和剪切板黏贴上传, 格式限制 - jpg, png, gif
    • 发布框支持本地存储功能,会在内容变更时保存,「提交」按钮点击时清空
    Ctrl+Enter