js 图片处理 Jcrop.js API

引入jquery.Jcrop.min.css和jquery.Jcrop.min.js

参数/接口说明

options 参数说明
名称    默认值    说明
allowSelect    true    允许新选框
allowMove    true    允许选框移动
allowResize    true    允许选框缩放
trackDocument    true     
baseClass    “jcrop”    基础样式名前缀。说明：class=”jcrop-holder”，更改的只是其中的 jcrop。
addClass    null    添加样式。例：假设值为 “test”，那么会添加样式到
bgColor    “black”    背景颜色。颜色关键字、HEX、RGB 均可。
bgOpacity    0.6    背景透明度
bgFade    false    使用背景过渡效果
borderOpacity    0.4    选框边框透明度
handleOpacity    0.5    缩放按钮透明度
handleSize    9    缩放按钮大小
handleOffset    5    缩放按钮与边框的距离
aspectRatio    0    选框宽高比。说明：width/height
keySupport    true    支持键盘控制。按键列表：上下左右（移动）、Esc（取消）、Tab（跳出裁剪框，到下一个）
cornerHandles    true    允许边角缩放
sideHandles    true    允许四边缩放
drawBorders    true    绘制边框
dragEdges    true    允许拖动边框
fixedSupport    true     
touchSupport    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(){}    选框选定时的事件
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]
参数/接口说明

例子

 1 <html>
 2 <head>
 3     <meta name="viewport" content="width=device-width" />
 4     <title>Jcrop使用</title>
 5     <script src="~/Scripts/jquery-1.8.2.js"></script>
 6     <link href="~/Scripts/expand-forNet/Jcrop-0.9.12/jquery.Jcrop.min.css" rel="stylesheet" />
 7     <script src="~/Scripts/expand-forNet/Jcrop-0.9.12/jquery.Jcrop.min.js"></script>
 8     <script>
 9         function start() {
10             $("#show").Jcrop({
11                 setSelect: [30, 30, 270, 270],//初始化选中区域
12                 fadeTime: 400,
13                 aspectRatio: 1, //选中区域宽高比为1，即选中区域为正方形
14                 onChange: showCoords, //当选择区域变化的时候，执行对应的回调函数
15                 onSelect: showCoords//当选中区域的时候，执行对应的回调函数
16             }, function () {
17                 jc = this;
18             })
19         }
20         function showCoords(info) {
21             var imgW = 300 * 140 / info.w;//大图宽 * 小图宽 / 选框宽
22             var imgH = 300 * 140 / info.h;
23             var left = info.x * 140 / info.w;//
24             var top = info.y * 140 / info.h;
25             $("#show1 img").css({ "width": imgW, "height": imgH, "left": -left, "top": -top });
26         }
27         function cancel() {
28             jc.destroy();
29         }
30     </script>
31 </head>
32 <body id="bd">
33     <div>
34         <button onclick="start()">开始</button>
35         <button onclick="cancel()">结束</button>
36     </div>
37     <img id="show" width="300" height="300" src="~/Scripts/expand/img/test.JPG" />
38     <div id="show1" style="width:200px;height:200px; position:relative;overflow:hidden;">
39         <img width="200" height="200" src="~/Scripts/expand/img/test.JPG" style="position:absolute;" />
40     </div>
41 </body>
42 </html>
实例

 

posted @ 2015-01-05 12:58  灰色雨逸  阅读(1179)  评论(0)  编辑  收藏  举报