引入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. python threading编程中的LOCK和RLOCK(可重入锁)

    找到一本PYTHON并发编辑的书, 弄弄.. #!/usr/bin/env python # -*- coding: utf-8 -*- import threading import time sh ...

  2. 2016"百度之星" - 初赛（Astar Round2A）Gym Class(拓扑排序)

    Gym Class  Accepts: 849  Submissions: 4247  Time Limit: 6000/1000 MS (Java/Others)  Memory Limit: 65 ...

  3. jQuery实现长按按钮触发事件的方法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. LIS的nlogn

    nlogn老忘,开个帖记录一下 开一个栈,每次取栈顶元素top和读到的元素temp做比较,如果temp > top 则将temp入栈:如果temp < top则二分查找栈中的比temp大的 ...

  5. [Linux] 取得服务器版本

    1) 登录到服务器执行 lsb_release -a ,即可列出所有版本信息,例如: [root@3.5.5Biz-46 ~]# lsb_release -a LSB Version: 1.3 Dis ...

  6. Linux命令之ar - 创建静态库.a文件和动态库.so

    转自:http://blog.csdn.net/eastonwoo/article/details/8241693 用途说明 创建静态库.a文件.用C/C++开发程序时经常用到,但我很少单独在命令行中 ...

  7. 单例模式/singleton模式/创建型模式

    Java实现要点: 私有构造方法 线程安全(并发的考虑) 延迟加载(效率的考虑,对于较大的类在使用时在加载) 公有方法访问单一实例 常见单例模式代码及问题 //无延迟加载,常驻内存(即使不使用) cl ...

  8. mysql注入小测试

    转自:http://www.jb51.net/article/46163.htm 在开发网站的时候,出于安全考虑,需要过滤从页面传递过来的字符.通常,用户可以通过以下接口调用数据库的内容:URL地址栏 ...

  9. ember.js:使用笔记1-数组数据统一显示

    ember中数据一般都是以array的形式存储的,控制器使用,如: App.DataController = Em.ArrayController.extend({}); 想要在一个页面中输出所有的数 ...

  10. const int *

    5.Please choose the right statement about constusage: A.const int a;//const interger B.int const a;/ ...