引入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. Ajax 数据库操作

    为了清楚的说明使用 Ajax 从数据库中存取信息有多么容易,我们要构建一个 MySQL 查询,然后把结果显示在ajax.html 上.但是在我们开始之前,让我们先做一些基础工作.使用下面的命令创建一个 ...

  2. POJ3208 Apocalypse Someday(二分 数位DP)

    数位DP加二分 //数位dp,dfs记忆化搜索 #include<iostream> #include<cstdio> #include<cstring> usin ...

  3. hdu 5294 最短路+最大流 ***

    处理处最短路径图,这个比较巧妙 链接:点我

  4. pthread_create传递参数

    转自:http://blog.csdn.net/yeyuangen/article/details/6757525 #include <iostream> #include <pth ...

  5. 5.linux内核模块基础,内核模块学习

    linux内核模块基础 一.定义 Linux 内核的整体结构非常庞大,其包含的组件也非常多,如何使用这些组件呢: 方法 1:把所有的组件都编译进内核文件,即:zImage 或 bzImage,但这样会 ...

  6. Java中synchronized详解

    synchronized 原则: 尽量避免无谓的同步控制,同步需要系统开销,可能造成死锁 尽量减少锁的粒度 同步方法 public synchronized void printVal(int v) ...

  7. [Liferay6.2]Liferay入门级portlet开发示例

    什么是Portlet 来自百度百科(http://baike.baidu.com/view/58961.htm)的定义如下: portlet是基于java的web组件,处理request并产生动态内容 ...

  8. POJ 1947 Rebuilding Roads 树形DP

    Rebuilding Roads   Description The cows have reconstructed Farmer John's farm, with its N barns (1 & ...

  9. Struts2基本配置详解

    Struts2配置文件加载顺序 struts2 配置文件由核心控制器加载 StrutsPrepareAndExecuteFilter (预处理,执行过滤) init_DefaultProperties ...

  10. Servlet获取类路径下的资源

    示例程序: package cn.yzu; import java.io.IOException; import java.io.InputStream; import javax.servlet.S ...