jQuery Jcrop API参数说明(中文版)(转)(图片剪切)
Jcrop是一个jQuery图片裁剪插件,它能为你的WEB应用程序快速简单地提供图片裁剪的功能。特点如下:
- 对所有图片均unobtrusively(无侵入的,保持DOM简洁)
- 支持宽高比例锁定
- 支持 minSize/maxSize设置
- 支持改变选区或移 动选区时的回调(Callback)
- 支持用键盘微调选区
- 通过API创建互动,比如动画效果
- 支持CSS样式
版本及Demo
- jQuery v1.5.1+
- Jcrop v0.9.9
- Demo地址:http://code.ciaoca.com/jquery/jcrop/demo/
- 下载地址:http://deepliquid.com/content/Jcrop_Download.html
options 参数说明(可选)
| 名称 | 默认值 | 说明 |
|---|---|---|
| allowSelect | true | 允许新选框 |
| allowMove | true | 允许选框移动 |
| allowResize | true | 允许选框缩放 |
| trackDocument | true | 拖动选框时,允许超出图像以外的地方时继续拖动。 |
| baseClass | 'jcrop' | 基础样式名前缀。说明:class="jcrop-holder",更改的只是其中的 jcrop。
例:假设值为 "test",那么样式名会更改为 "test-holder" |
| addClass | null | 添加样式。
例:假设值为 "test",那么会添加样式到 |
| bgColor | 'black' | 背景颜色。颜色关键字、HEX、RGB 均可。 |
| bgOpacity | 0.6 | 背景透明度 |
| bgFade | false | 使用背景过渡效果 |
| borderOpacity | 0.4 | 选框边框透明度 |
| handleOpacity | 0.5 | 缩放按钮透明度 |
| handleSize | 9 | 缩放按钮大小 |
| aspectRatio | 0 | 选框宽高比。说明:width/height |
| keySupport | true | 支持键盘控制。按键列表:上下左右(移动选框)、Esc(取消选框) |
| createHandles | ['n','s','e','w','nw','ne','se','sw'] | 设置边角控制器 |
| createDragbars | ['n','s','e','w'] | 设置边框控制器 |
| createBorders | ['n','s','e','w'] | 设置边框 |
| drawBorders | true | 绘制边框 |
| dragEdges | true | 允许拖动边框 |
| fixedSupport | true | 支持 fixed,例如:IE6、iOS4 |
| touchSupport | null | 支持触摸事件 |
| shade | 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(){} | 选框选定时的事件 |
| onDblClick | function(){} | 在选框内双击时的事件 |
| onRelease | function(){} | 取消选框时的事件 |
使用方法
载入CSS文件
<link rel="stylesheet" href="css/jquery.Jcrop.css">
载入JavaScript文件
<script src="js/jquery.js"></script>
<script src="js/jquery.Jcrop.js"></script>
给图像标签加上ID
<img id="element_id" src="pic.jpg">
调用Jcrop
$("#element_id").Jcrop();
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] |
原文地址:http://blog.csdn.net/xht555/article/details/43407141
jQuery Jcrop API参数说明(中文版)(转)(图片剪切)的更多相关文章
- Jcrop+strut2+jsp实现图片剪切
在网上找,发现都是不全的,要么没获取图片路径,要么没后台等等,今天就来个全的 一:总体步骤 =>页面上传图片 =>获取上传图片剪切的四个值x,y,w,h =>后天进行剪切 接下来就开 ...
- struts2+jsp+jquery+Jcrop实现图片裁剪并上传
<1> 使用html标签上传需要裁剪的大图. <2> 在页面呈现大图,使用Jcrop(Jquery)对大图进行裁剪,并且可以进行预览. <3> 选择好截取部分之后发 ...
- 调用jquery.Jcrop.min.js 切割图片 实例
需求是:上传一个图片,然后将上传的这个图片进行切割........ 首先是jsp页面.页面需要引入js <script src="${fileUrlPrx}/scripts/wap/ ...
- 图片上传,图片剪切jquery.imgareaselect
---恢复内容开始--- <%@ page language="java" contentType="text/html; charset=UTF-8" ...
- 基于 jQuery Jcrop 插件的功能模块:头像剪裁
/** Jcrop version: 0.9.12 jQuery version: 1.9.0 Author: 小dee Date: 2014.10.30 */ 先看看他山之石:博客园的头像模块也是使 ...
- Google Chart API 参考 中文版
Google Chart API 参考 中文版 文档信息 翻译: Cloudream ,最后修改:02/22/2008 06:11:08 英文版版权归 Google , 转载此中文版必须以链接形式注明 ...
- MVC使用JCrop上传、裁剪图片
JCrop用来裁剪图片,本篇想体验的是: 在视图页上传图片: 上传成功,跳转到另外一个编辑视图页,使用JCrop对该图片裁剪,并保存图片到指定文件夹: 裁剪成功后,在主视图页显示裁剪图片: 当然,实际 ...
- jQuery JCrop插件的使用详解
jQuery的一个图片剪切的一个插件, 使用插件必须条件:引入jQuery.js文件,引入jQuery.Jcrop.js文件,引入JQuery.Jcrop.css文件 1.最基本的使用方法: &l ...
- Canvas 实现图片剪切
用户上传头像然后截图的需求很常见,很多做法是把图像发送到后端,把裁剪后的结果发送给浏览器,这种方式会增加处理时延.最近正好学习了HTML5里的canvas,发现它的图片处理功能比较强大,就打算用can ...
随机推荐
- ResultSetMetaData和DatabaseMetaData实现数据库中属性,属性值,属性所赋值的获取等
----------------------------------------------有些类下面代码中有; public class Test1 { TestDAO t=new TestDAO( ...
- 20150625_Andriod_02_ListView2_多条目显示_选中
android listview 参考地址: http://www.cnblogs.com/zhengbeibei/archive/2013/05/14/3078805.html http://xy ...
- UML类图几种关系的总结(转)
原文:http://gjhappyyy.iteye.com/blog/1422515 在UML类图中,常见的有以下几种关系: 泛化(Generalization), 实现(Realization), ...
- SharePoint自动化系列——Select-option标签的定位方法总结
转载请注明出自天外归云的博客园:http://www.cnblogs.com/LanTianYou/ C#中通过Selenium定位页面上的select-option结构,尝试了以下几种方法,均没有生 ...
- 探索Win32系统之窗口类(转载)
Window Classes in Win32 摘要 本文主要介绍win32系统里窗口类的运做和使用机制,探索一些细节问题,使win32窗口类的信息更加明朗化. 在本文中,"类", ...
- jar文件签名
1.生成密钥: keytool -genkey -keystore key.keystore -alias key -validity 3650 将在当前目录下生成一个key.keystore文件, ...
- 腾讯微博模拟登陆+数据抓取(java实现)
不多说,贴出相关代码. 参数实体: package token.def; import java.io.Serializable; import java.util.Properties; publi ...
- Outlook 无法更新全球通讯簿,错误 0×80190194
当 Outlook 客户端尝试更新全球通讯簿,实际上是下载脱机通讯簿(Officeline Address Book,简称 OAB)时,可能会收到 0×80190194 的错误.错误代码 0×8019 ...
- TCP/IP协议简介
计算机网络是什么? 简单地理解,计算机网络的任务就是传输数据.为了完成这一复杂的任务,国际标准化组织ISO提供了OSI参考模型,这种模型把互联网网络氛围7层,分别是物理层.数据链路层.网络层.传输层. ...
- STREAM Benchmark
STREAM Benchmark及其操作性能分析 文/raywill STREAM 是业界广为流行的综合性内存带宽实际性能 测量 工具之一.随着处理器处理核心数量的增多,内存带宽对于提升整个系统性能越 ...