Jcrop是一个jQuery图片裁剪插件,它能为你的WEB应用程序快速简单地提供图片裁剪的功能。特点如下:

  • 对所有图片均unobtrusively(无侵入的,保持DOM简洁)
  • 支持宽高比例锁定
  • 支持 minSize/maxSize设置
  • 支持改变选区或移 动选区时的回调(Callback)
  • 支持用键盘微调选区
  • 通过API创建互动,比如动画效果
  • 支持CSS样式

版本及Demo

options 参数说明(可选)

名称 默认值 说明
allowSelect true 允许新选框
allowMove true 允许选框移动
allowResize true 允许选框缩放
trackDocument true 拖动选框时,允许超出图像以外的地方时继续拖动。
baseClass 'jcrop' 基础样式名前缀。说明:class="jcrop-holder",更改的只是其中的 jcrop。

例:假设值为 "test",那么样式名会更改为 "test-holder"

addClass null 添加样式。

例:假设值为 "test",那么会添加样式到class="jcrop-holder 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参数说明(中文版)(转)(图片剪切)的更多相关文章

  1. Jcrop+strut2+jsp实现图片剪切

    在网上找,发现都是不全的,要么没获取图片路径,要么没后台等等,今天就来个全的 一:总体步骤 =>页面上传图片 =>获取上传图片剪切的四个值x,y,w,h =>后天进行剪切 接下来就开 ...

  2. struts2+jsp+jquery+Jcrop实现图片裁剪并上传

    <1> 使用html标签上传需要裁剪的大图. <2> 在页面呈现大图,使用Jcrop(Jquery)对大图进行裁剪,并且可以进行预览. <3> 选择好截取部分之后发 ...

  3. 调用jquery.Jcrop.min.js 切割图片 实例

    需求是:上传一个图片,然后将上传的这个图片进行切割........ 首先是jsp页面.页面需要引入js  <script src="${fileUrlPrx}/scripts/wap/ ...

  4. 图片上传,图片剪切jquery.imgareaselect

    ---恢复内容开始--- <%@ page language="java" contentType="text/html; charset=UTF-8" ...

  5. 基于 jQuery Jcrop 插件的功能模块:头像剪裁

    /** Jcrop version: 0.9.12 jQuery version: 1.9.0 Author: 小dee Date: 2014.10.30 */ 先看看他山之石:博客园的头像模块也是使 ...

  6. Google Chart API 参考 中文版

    Google Chart API 参考 中文版 文档信息 翻译: Cloudream ,最后修改:02/22/2008 06:11:08 英文版版权归 Google , 转载此中文版必须以链接形式注明 ...

  7. MVC使用JCrop上传、裁剪图片

    JCrop用来裁剪图片,本篇想体验的是: 在视图页上传图片: 上传成功,跳转到另外一个编辑视图页,使用JCrop对该图片裁剪,并保存图片到指定文件夹: 裁剪成功后,在主视图页显示裁剪图片: 当然,实际 ...

  8. jQuery JCrop插件的使用详解

    jQuery的一个图片剪切的一个插件, 使用插件必须条件:引入jQuery.js文件,引入jQuery.Jcrop.js文件,引入JQuery.Jcrop.css文件   1.最基本的使用方法: &l ...

  9. Canvas 实现图片剪切

    用户上传头像然后截图的需求很常见,很多做法是把图像发送到后端,把裁剪后的结果发送给浏览器,这种方式会增加处理时延.最近正好学习了HTML5里的canvas,发现它的图片处理功能比较强大,就打算用can ...

随机推荐

  1. Word and MediaElement

    function jmc_new_lib(){// Because we still want the script to load but not the styleswp_enqueue_scri ...

  2. Apache Mina 入门实例

    这个教程是介绍使用Mina搭建基础示例.这个教程内容是以创建一个时间服务器. 以下是这个教程需要准备的东西: MINA 2.0.7 Core JDK 1.5 或更高 SLF4J 1.3.0 或更高 L ...

  3. cookie学习

    cookie是储存于访问者的计算机中的变量,每当同一台计算机通过浏览器请求某个页面时,就会发送这个cookie,可以使用javascript来创建和取回cookie的值. 创建和存储cookie 首先 ...

  4. linux 时钟源初步分析linux kernel 时钟框架详细介绍

    初步概念: 看datasheet的关于时钟与定时器的部分, FCLK供给cpu, HCLK供给AHB总线设备(存储器控制器,中断控制器.LCD控制器.DMA.USB主机控制器等), PCLK供给APB ...

  5. EF 用CallContext上下文管理

    public class ObjectContextFactory { private static CIK_NewsEntities context; public static DbContext ...

  6. poj1987 Distance Statistics

    普通dfs访问每个点对的复杂度是O(n^2)的,显然会超时. 考虑访问到当前子树的根节点时,统计所有经过根的点(u, v)满足: dist(u) + dist(v) <= maxd,并且 bel ...

  7. Linux是如何管理内存的

    物理内存的管理 Linux管理物理内存是使用分页机制实现的.为了使分页机制在32位和64位体系结构下高效工作,Linux采用了一个四级分页策略. Linux支持多种内存分配机制.分配物理内存页框的主要 ...

  8. java中的动态代理机制

    java中的动态代理机制 在java的动态代理机制中,有两个重要的类或接口,一个是 InvocationHandler(Interface).另一个则是 Proxy(Class),这一个类和接口是实现 ...

  9. 新蒂下午茶体基本版SentyTEA-Basic

    一.目前的最新版新蒂下午茶体包含了7600+常用汉字,每个字都是手写而成,是一套充满手写感的中文字体,轻松.惬意,如同慢饮一杯下午茶.SentyTEA-Basic.ttf  这个一个新蒂下午茶体基本版 ...

  10. 利用JAVA反射机制将JSON数据转换成JAVA对象

    net.sf.json.JSONObject为我们提供了toBean方法用来转换为JAVA对象, 功能更为强大,  这里借鉴采用JDK的反射机制, 作为简单的辅助工具使用,   有些数据类型需要进行转 ...