引入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>

实例

js 图片处理 Jcrop.js API的更多相关文章

  1. 图片旋转+剪裁js插件(兼容各浏览器) « 张鑫旭-鑫空间-鑫生活

    图片旋转+剪裁js插件(兼容各浏览器) « 张鑫旭-鑫空间-鑫生活 图片旋转+剪裁js插件(兼容各浏览器) by zhangxinxu from http://www.zhangxinxu.com 本 ...

  2. 图片裁剪的js有哪些（整理）

    图片裁剪的js有哪些(整理) 一.总结 一句话总结:如果用了amaze框架就去amaze框架的插件库里面找图片裁剪插件,如果没用,jcrop和cropper都不错. 1.amazeui的插件库中有很多 ...

  3. JS图片自动或者手动滚动效果(支持left或者up)

    JS图片自动或者手动滚动效果(支持left或者up) JS图片自动或者手动滚动效果 在谈组件之前 来谈谈今天遇到搞笑的事情,今天上午接到一个杭州电话 0571-28001187 即说是杭州人民法院的 ...

  4. 结合canvas和jquery.Jcrop.js裁切图像上传图片

    1.引入的外部资源: jquery.Jcrop.css.jquery.Jcrop.js.upimg.js 2.使用的页面元素 @* 选择照片 *@ <div class="line&q ...

  5. 使用Vue.js和Axios从第三方API获取数据 — SitePoint

    更多的往往不是,建立你的JavaScript应用程序时,你会想把数据从远程源或消耗一个[ API ](https:/ /恩.维基百科.org /维基/ application_programming_ ...

  6. 支持无限加载的js图片画廊插件

    natural-gallery-js是一款支持无限加载的js图片画廊插件.该js图片画廊支持图片的懒加载,可以对图片进行搜索,分类,还可以以轮播图的方式来展示和切换图片. 使用方法 在页面中引入下面的 ...

  7. 开源JS图片裁剪插件

    开源JS图片裁剪插件 一.总结 一句话总结: 要用点赞最高的插件,这样适用性最好,效果最好,出问题的概率也最低,这里电脑端和手机端都可以用的建议用 cropper.js 二.5款好用的开源JS图片裁剪 ...

  8. 兼容好的JS图片上传预览代码

    转 : http://www.codefans.net/articles/1395.shtml 兼容好的JS图片上传预览代码 (谷歌,IE11) <html xmlns="http:/ ...

  9. JS图片自动和可控的轮播切换特效

    点击这里查看效果:http://hovertree.com/texiao/js/1.htm HTML文件代码如下: <!DOCTYPE html> <html xmlns=" ...

随机推荐

  1. less 入门1

    less 入门1 less.html <!DOCTYPE html> <html lang="zh-cn"> <head > <meta ...

  2. NS2中trace文件分析

    ns中模拟出来的时间最终会以trace文件的形式告诉我们,虽然说一般都是用awk等工具分析trace文件,但是了解trace文件的格式也是必不可少的.下面就介绍一下无线网络模拟中trace文件的格式. ...

  3. Win7系统怎么开启远程桌面？Win7远程桌面怎么用（转）

    远程桌面服务开启之后,可以方便的远程管理服务器或计算机.为生活和工作带来不少便利呢,很多小伙伴还不知道怎么开启win7远程桌面吧(下面咗嚛以内网远程桌面为例)   工具/原料 Win7 Win7远程桌 ...

  4. ubuntu中禁用华硕S550C触摸屏的方法

    华硕S550C的触摸屏被我一不小心弄了一条裂缝,导致屏幕一直会莫名其妙自动进行点击,严重影响了使用.在windows 系统下通过FN+F7的快捷键可以直接禁用触摸屏,但是换成ubuntu 系统之后,快 ...

  5. 《大话》之 装饰模式 Vs 建造者模式

    一.简介: 装饰模式:     背景:小菜要见美女娇娇,感慨自己不会着装,怕给娇娇留下坏印象               内容:动态的给一个对象添加一些额外职责               图文并茂: ...

  6. AngularJS开发之_指令

    指令是什么?    指令是我们用来扩展浏览器能力的技术之一.在DOM编译期间,和HTML关联着的指令会被检测到,并且被执行.这使得指令可以为DOM指定行为,或者改变它. 1.指令的匹配模式 index ...

  7. poj 1273 最大流

    题目链接:http://poj.org/problem?id=1273 a.EK算法:(Edmond-Karp): 用BFS不断找增广路径,当找不到增广路径时当前流量即为最大流. b.dinic算法: ...

  8. 《DSP using MATLAB》示例Example5.5

    代码: %% ---------------------------------------------------------- %% START N=5 %% ------------------ ...

  9. python 线程之 threading(一)

    threading:基于对象和类的较高层面上的接口,threading模块在内部使用_thread模块来实现线程的对象以及常用的同步化工具的功能. 使用定制类的方式继承 threading.Threa ...

  10. spring MVC 的MultipartFile转File？？

    MultipartFile file = xxx;         CommonsMultipartFile cf= (CommonsMultipartFile)file;         DiskF ...