您的位置:首页 > 运维架构

图片裁剪插件jcrop用法

2013-04-28 11:31 316 查看
基本使用方法如下:

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

<linkrel="stylesheet"href="css/jquery.Jcrop.css">

<scriptsrc="js/jquery.js"></script>

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

二、在head部分插入回调函数等相关处理参数。

01
<script
language=
"Javascript"
>
02
<!--
03
jQuery(
function
($){
04
//
Createvariables(inthisscope)toholdtheAPIandimagesize
05
var
jcrop_api,
boundx,boundy;
06
07
$(
'#cropbox'
).Jcrop({
08
minSize:
[0,0],
09
maxSize:[0,0],
10
setSelect:
[0,0,0,0],
11
boxWidth:800,
12
borderOpacity:0.3,
13
keySupport:
false
,
14
dragEdges:
false
,
15
allowSelect:
false
,
16
allowResize:
false
,
17
bgOpacity:0.2,
18
boundary:0,
19
//allowMove:false,
20
addClass:
'jcrop-handle'
,
21
onSelect:
updateCoords,
22
},
23
function
(){
24
//
UsetheAPItogettherealimagesize
25
var
bounds
=
this
.getBounds();
26
boundx
=bounds[0];
27
boundy
=bounds[1];
28
//
StoretheAPIinthejcrop_apivariable
29
jcrop_api
=
this
;
30
});
31
function
updateCoords(c)
32
{
33
$(
'#x'
).val(c.x);
34
$(
'#y'
).val(c.y);
35
$(
'#w'
).val(c.w);
36
$(
'#h'
).val(c.h);
37
};
38
function
checkCoords()
39
{
40
if
(parseInt($(
'#w'
).val()))
return
true
;
41
alert(
'请选择裁剪区域'
);
42
return
false
;
43
};
44
});
45
-->
46
</script>
三、给相关图片加上id以便识别。

<imgid="cropbox"src="x.jpg">

这样就能实现最简单的裁剪效果,至于如何结合php等动态语句处理图片,在置顶的文章里已经给出了示例。

下表给出基本options参数设置:
名称默认值说明
allowSelecttrue允许新选框
allowMovetrue允许选框移动
allowResizetrue允许选框缩放
trackDocumenttrue
baseClass"jcrop"基础样式名前缀。说明:class="jcrop-holder",更改的只是其中的jcrop。
addClassnull添加样式会。例:假设值为"test",那么会添加样式到class="testjcrop-holder"
bgColor"black"背景颜色。颜色关键字、HEX、RGB均可。
bgOpacity0.6背景透明度
bgFadefalse使用背景过渡效果
borderOpacity0.4选框边框透明度
handleOpacity0.5缩放按钮透明度
handleSize9缩放按钮大小
handleOffset5缩放按钮与边框的距离
aspectRatio0选框宽高比。说明:width/height
keySupporttrue支持键盘控制。按键列表:上下左右(移动)、Esc(取消)、Tab(跳出裁剪框,到下一个)
cornerHandlestrue允许边角缩放
sideHandlestrue允许四边缩放
drawBorderstrue绘制边框
dragEdgestrue允许拖动边框
fixedSupporttrue
touchSupportnull
boxWidth0画布宽度
boxHeight0画布高度
boundary2边界。说明:可以从边界开始拖动鼠标选择裁剪区域
fadeTime400过度效果的时间
animationDelay20动画延迟
swingSpeed3过渡速度
minSelect[0,0]选框最小选择尺寸。说明:若选框小于该尺寸,则自动取消选择
maxSize[0,0]选框最大尺寸
minSize[0,0]选框最小尺寸
onChangefunction(){}选框改变时的事件
onSelectfunction(){}选框选定时的事件
onReleasefunction(){}取消选框时的事件
下表是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]
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  jquery 图片裁剪 jcrop