引入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. OCJP(1Z0-851) 模拟题分析（八）over

    Exam : 1Z0-851 Java Standard Edition 6 Programmer Certified Professional Exam 以下分析全都是我自己分析或者参考网上的,定有 ...

  2. VC++6.0使用OpenGL前的配置（必看）

    要在VC++6.0中使用opengl,需要配置一下环境设置. 具体需要两步: 1.加入一个头文件,两个lib文件,两个dll文件,放在合适位置. 2.配置一下vc++6.0的Project Setti ...

  3. HDU5489 Removed Interval(动态规划)

    一个长度为n的序列,删除任意长度为l的连续子序列后,求剩下的序列的最长公共子序列. 先求出以第i个元素为开始的LIS的长度,再一次循环,对所要求的结果更新 #include<iostream&g ...

  4. Windows环境下Oracle数据库的自动备份脚本

    批处理文件(.bat) @echo off echo ================================================ echo  Windows环境下Oracle数据 ...

  5. view的setTag() 和 getTag()应用 （转）

    原文地址:http://www.cnblogs.com/qingblog/archive/2012/07/03/2575140.html View中的setTag(Onbect)表示给View添加一个 ...

  6. HTML Entity Sets - All

    http://www.htmlentities.com/html/entities/ The view below displays the characters used in the offici ...

  7. ios内购

    1.添加框架,storeKit.framework 需要真机调试 /* 内购五步: 1.请求可销售商品的列表 2.展示课销售的商品 3.点击购买 4.开具小票 5.创建交易对象并添加到交易队列 6.创 ...

  8. slide.js使用文档

    <!doctype html> <head> <script src="js/jquery-latest.min.js"></script ...

  9. python 定义类方法

    定义类方法 和属性类似,方法也分实例方法和类方法. 在class中定义的全部是实例方法,实例方法第一个参数 self 是实例本身. 要在class中定义类方法,需要这么写: class Person( ...

  10. CDN（内容分发网络）是什么？

    尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节,使内容传输的更快.更稳定.其目的是使用户可就近取得所需内容,解决Internet网络拥挤的状况,提高用户访问网站的响应速度. 解决CDN缓 ...