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]

参数/接口说明

例子

 <html>
 <head>
     <meta name="viewport" content="width=device-width" />
     <title>Jcrop使用</title>
     <script src="~/Scripts/jquery-1.8.2.js"></script>
     <link href="~/Scripts/expand-forNet/Jcrop-0.9.12/jquery.Jcrop.min.css" rel="stylesheet" />
     <script src="~/Scripts/expand-forNet/Jcrop-0.9.12/jquery.Jcrop.min.js"></script>
     <script>
         function start() {
             $("#show").Jcrop({
                 setSelect: [30, 30, 270, 270],//初始化选中区域
                 fadeTime: 400,
                 aspectRatio: 1, //选中区域宽高比为1，即选中区域为正方形
                 onChange: showCoords, //当选择区域变化的时候，执行对应的回调函数
                 onSelect: showCoords//当选中区域的时候，执行对应的回调函数
             }, function () {
                 jc = this;
             })
         }
         function showCoords(info) {
             var imgW = 300 * 140 / info.w;//大图宽 * 小图宽 / 选框宽
             var imgH = 300 * 140 / info.h;
             var left = info.x * 140 / info.w;//
             var top = info.y * 140 / info.h;
             $("#show1 img").css({ "width": imgW, "height": imgH, "left": -left, "top": -top });
         }
         function cancel() {
             jc.destroy();
         }
     </script>
 </head>
 <body id="bd">
     <div>
         <button onclick="start()">开始</button>
         <button onclick="cancel()">结束</button>
     </div>
     <img id="show" width="300" height="300" src="~/Scripts/expand/img/test.JPG" />
     <div id="show1" style="width:200px;height:200px; position:relative;overflow:hidden;">
         <img width="200" height="200" src="~/Scripts/expand/img/test.JPG" style="position:absolute;" />
     </div>
 </body>
 </html>

实例