引入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. poj 3278:Catch That Cow（简单一维广搜）

    Catch That Cow Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 45648   Accepted: 14310 ...

  2. 深入理解JavaScript定时机制和定时器注意问题

    容易欺骗别人感情的JavaScript定时器 JavaScript的setTimeout与setInterval是两个很容易欺骗别人感情的方法,因为我们开始常常以为调用了就会按既定的方式执行, 我想不 ...

  3. 用脚本创建和恢复 DB2数据库

    CREATE DATABASE AUTOMATIC STORAGE YES ON 'C:\' DBPATH ON 'C:\' USING CODESET GBK TERRITORY CN COLLAT ...

  4. 攻城狮在路上（壹） Hibernate（十七）--- Hibernate并发处理问题

    一.多个事务并发运行时的并发问题: 总结为第一类丢失更新.脏读.虚读.不可重复读.第二类丢失更新. 1.第一类丢失更新: 撤销一个事务时,把其他事务已提交的更新数据覆盖. 2.脏读: 一个事务读到另一 ...

  5. Python 入门简介(一)

    Why Python? 我个人认为去学习一门新的语言其实是不需要理由的,当然如果你硬要我编个理由的话还是很容易的. 容易学 容易用 有人真的在用Python么? 这个问题谁用谁知道. 选择什么开发工具 ...

  6. Oracle 【IT实验室】数据库备份与恢复之一：exp/imp(导出与导入&装库与卸库)

    1.1  基本命令 1.  获取帮助 $ exp help=y $ imp help=y     2.  三种工作方式 (1)交互式方式 $ exp        //  然后按提示输入所需要的参数 ...

  7. Win10 UAP 绑定

    Compiled DataBinding in Windows Universal Applications (UAP) http://nicksnettravels.builttoroam.com/ ...

  8. C# Func<T,TResult>

    using System; namespace FuncDemo { internal class Program { private static void Main() { //类似委托功能 Fu ...

  9. 动软MySQL存储过程模板

    <#@ template language="c#" HostSpecific="True" #><#@ output extension= ...

  10. C#交互功能的演化

    (此文章同时发表在本人微信公众号“dotNET每日精华文章”,欢迎右边二维码来关注.) 题记:Miguel de Icaza在最近发表的一篇博文中畅谈了Mono及其相关产品中的C#交互特性的演化情况. ...