jcrop基本参数一览

jcrop原始下载页面：猛击此处

基本使用方法如下：

一、在head部分(<head>和</head>之间)插入相关css和js文件。

<link rel="stylesheet" href="css/jquery.Jcrop.css">
<script src="js/jquery.js"></script>
<script src="js/jquery.Jcrop.js"></script>

二、在head部分插入回调函数等相关处理参数。

代码如下:

<script language="Javascript">
  <!--
  jQuery(function($){
 // Create variables (in this scope) to hold the API and image size
  var jcrop_api, boundx, boundy;

$('#cropbox').Jcrop({
  minSize: [0,0],
  maxSize:[0,0],
  setSelect: [0,0,0,0],
  boxWidth:800,
  borderOpacity:0.3,
  keySupport:false,
  dragEdges:false,
  allowSelect:false,
  allowResize:false,
  bgOpacity:0.2,
  boundary:0,
  //allowMove:false,
  addClass: 'jcrop-handle',
  onSelect: updateCoords,
  },
  function(){
  // Use the API to get the real image size
  var bounds = this.getBounds();
  boundx = bounds[0];
  boundy = bounds[1];
  // Store the API in the jcrop_api variable
  jcrop_api = this;
  });
  function updateCoords(c)
  {
  $('#x').val(c.x);
  $('#y').val(c.y);
  $('#w').val(c.w);
  $('#h').val(c.h);
  };
  function checkCoords()
  {
  if (parseInt($('#w').val())) return true;
  alert('请选择裁剪区域');
  return false;
  };
  });
-->
</script>

三、给相关图片加上id以便识别。

<img id="cropbox" src="x.jpg">
这样就能实现最简单的裁剪效果，至于如何结合php等动态语句处理图片，在置顶的文章里已经给出了示例。

下表给出基本options参数设置：











































































































































名称 默认值 说明
allowSelect true 允许新选框
allowMove true 允许选框移动
allowResize true 允许选框缩放
trackDocument true
baseClass "jcrop" 基础样式名前缀。说明：class="jcrop-holder"，更改的只是其中的 jcrop。
addClass null 添加样式会。例：假设值为 "test"，那么会添加样式到 class="test jcrop-holder"
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]

赞 (0)

相关推荐

  • jcrop 网页截图工具(插件)开发

    jcrop 网页截图工具(插件)开发

    今天给大家介绍一下一个web 中经常会用到的截图(如:头像等)工具: Jcrop演示 项目结构: 效果图: 这个很有用: 看到这些,大家也想自己试试吧 =========================================== 代码部分: =========================================== 准备工作: 下载:Jcrop-0.9.10 (zip format) 解压后放入到你的项目里面,就如上面的项目结构一样... /Jcrop/WebContent

  • 基于jquery.Jcrop的头像编辑器

    用过新浪微博的朋友对它的头像编辑器都有印象吧.不过人家是用flash做的. 在一个项目中,也用到了同样的东西,本来想直接用新浪微博的,但它有一部分请求路径写到FLASH里面去了,所以只好放弃. 在网上找到了jquery.Jcrop,基本满足了我的需求,但它只是简单的切割而已,还有缩略图没有生成.或许有很多人都需要这类东西吧,于是我把它封装起来了,方便其它朋友直接使用. 官方网址:http://deepliquid.com/content/Jcrop.html 上面有很多demo,有兴趣的可以上去

  • jQuery 图像裁剪插件Jcrop的简单使用

    同事推荐了Jcrop这个插件,到它的官方站点http://deepliquid.com/content/Jcrop.html下载了最新版的压缩包,压缩包中包括了Jcrop的几个demo文件,关键的Jcrop.js文件和jQuery.Jcrop.css文件.基本上来说参照它的几个demo文件就可以学会使用这个插件了.晚上正好学习研究了下,现简单总结如下,也方便下英文不好的朋友们. 使用插件必须条件:引入jQuery.js文件,引入jQuery.Jcrop.js文件,引入JQuery.Jcrop.c

  • JQuery Jcrop 实现图片裁剪的插件

    JQuery Jcrop 实现图片裁剪的插件

    效果如下图请"运行代码"先试下运行,运行后请刷新一次,感受下: body{ margin:100px auto; text-align:center; } .jcrop-holder { text-align: left; } .jcrop-vline, .jcrop-hline{ font-size: 0; position: absolute; background: white url('http://img.jb51.net/jslib/images/Jcrop.gif') t

  • PHP+ajaxfileupload+jcrop插件完美实现头像上传剪裁

    PHP+ajaxfileupload+jcrop插件完美实现头像上传剪裁

    昨天花了点时间整合了一下头像插件 东拼西凑的成果 先来看下效果 1.先使用ajaxfileupload插件做异步上传.这个地方我本来想做个上传进度的效果,但技术有限失败了.上传按钮我还做了一个文件大小的限制,但是由于浏览器兼容性的问题,不完美在IE6--IE9之间还有很多问题需要解决 getFileSize函数是用于判断文件大小的函数 复制代码 代码如下: function getFileSize(fileName) {                var byteSize = 0;     

  • jQuery jcrop插件截图使用方法

    jQuery jcrop插件截图使用方法

    在后台来进行图片切割.头像截取的原理:在前台使用jcrop获取切面的x轴坐标.y轴坐标.切面高度.切面宽度,然后将这四个值传给后台.在后台要进行放大处理:将切面放大N倍,N=原图/前台展示的头像.即X = X*原图宽/前图宽,Y = Y*原图高/前图高,W = W*原图宽/前图宽,H = H*原图高/前图高.实例:JSP: 复制代码 代码如下: <div id="cutImage" style="display: none;"> <div clas

  • jQuery Jcrop插件实现图片选取功能

    jQuery Jcrop插件实现图片选取功能

    总的来说,原理很简单,大致流程是:在浏览器上加载原图 --> 用矩形框在原图上选取区域并将选取的顶点坐标和矩形尺寸发送至服务器 --> 服务器端用图片切割算法切割原图并输出切割后的图片.下面我们就分别对这几个步骤详细展开讨论分析,并在最后附上小demo供大家参考. 1.在页面上加载原图 这个就不用多说了,就是在页面上显示一张图片,一个img标签搞定,不过为了下一步演示,还是贴一下代码 <img src="girl.jpg" alt="" id=&q

  • PHP结合JQueryJcrop实现图片裁切实例详解

    我们经常可以看到一些网站上有图片剪切的功能,或许你会觉得这一功能炫目华丽,神秘莫测!但是今天介绍的一款专用于图片裁切的插件jquery.Jcrop.min.js就将揭开图片剪切的神秘面纱.使用这个插件可以很方便的实现这一功能,使用时仅需鼠标在图片上圈选出选区,即可把图片裁切成所选部分,非常适合用于头像的裁切编辑功能. 本实例演示分为HTML和php两部分: 第一部分,HTML代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio

  • jcrop基本参数一览

    jcrop原始下载页面:猛击此处 基本使用方法如下: 一.在head部分(<head>和</head>之间)插入相关css和js文件. <link rel="stylesheet" href="css/jquery.Jcrop.css"><script src="js/jquery.js"></script> <script src="js/jquery.Jcrop.js

  • Java图片裁剪和生成缩略图的实例方法

    Java图片裁剪和生成缩略图的实例方法

    一.缩略图 在浏览相册的时候,可能需要生成相应的缩略图. 直接上代码: public class ImageUtil { private Logger log = LoggerFactory.getLogger(getClass()); private static String DEFAULT_PREVFIX = "thumb_"; private static Boolean DEFAULT_FORCE = false;//建议该值为false /** * <p>Tit

  • PHP PDO fetch 模式各种参数的输出结果一览

    PDO 的 fetch 模式功能实在是太方便了,但每次要产生想要的结果都要试太麻烦了,这里列出可能的组合. 复制代码 代码如下: <?php    $dbAdapter = new PDO("mysql:host=localhost;dbname=test", "root", "1234");    $dbAdapter->exec("SET NAMES 'utf8';");          $data = $d

  • Vue 2.5 Level E 发布了： 新功能特性一览

    Vue 2.5 Level E 发布了： 新功能特性一览

    我们很高兴宣布 Vue 2.5 Level E 的发布!本次发布包括多个功能提升并且我们推荐你查看发布说明来获取完整详细信息. 在这篇文章中,我们将重点介绍一些更重要的的变化:更好的 TypeScript 集成,更好的错误处理,更好地支持单文件组件中的函数式组件以及与环境无关的服务端渲染. 更好的 TypeScript 集成 得益于 TypeScript 团队的帮助,2.5 提供了大大改进的类型声明,可以与 Vue 的开箱即用的 API 一起使用,而不需要组件类装饰器. 新的类型声明还可以让 V

  • JCrop+ajaxUpload 图像切割上传的实例代码

    JCrop+ajaxUpload 图像切割上传的实例代码

    先给大家展示下效果图: 页面代码 里面用户的uuid是写死的test <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE> <html lang="en"> <head> <title>用户头像剪裁</title>

  • MySQL函数一览_MySQL函数全部汇总

    前言 MySQL提供了众多功能强大.方便易用的函数,使用这些函数,可以极大地提高用户对于数据库的管理效率,从而更加灵活地满足不同用户的需求.本文将MySQL的函数分类并汇总,以便以后用到的时候可以随时查看. 数学函数 (1)ABS(x) 返回x的绝对值 (2)PI() 返回圆周率π,默认显示6位小数 (3)SQRT(x) 返回非负数的x的二次方根 (4)MOD(x,y) 返回x被y除后的余数 (5)CEIL(x).CEILING(x) 返回不小于x的最小整数 (6)FLOOR(x) 返回不大于x

  • jquery.Jcrop结合JAVA后台实现图片裁剪上传实例

    本文介绍了头像裁剪上传功能,用到的技术有  jQuery,springmvc,裁剪插件用的是jcrop(中间遇到很多坑,最终跨越). 图片上传步骤: 1.用户选择图片 2.将图片传入后台:用户选择图片的时候选择的是各种各样的,但是我们的网页显示图片大小是有限的,所以我们就要在用户选择图片之后将图片添加到后台进行压缩,压缩成我们想要的大小,之后再显示到页面才好 3.利用jcrop裁剪工具对图片进行裁剪并且实时预览 4.点击确定按钮将裁剪用到的参数传入后台,后台图片进行剪切,之后缩放成我们需要的格式

  • JS控制弹出悬浮窗口(一览画面)的实例代码

    JS控制弹出悬浮窗口(一览画面)的实例代码

    在web项目开发中经常遇到在一览画面中用户需要查看某一条记录的详细信息.如果用迁移画面的方式处理,速度会比较慢,而且用户体验不是太好.如果采用点击该条记录的详细链接时弹出一个层显示在当前画面的话,处理速度很快,而且用户感觉也比较新颖.下面我以某个对日电子商务网站为实例说明下它的实现方式. 1.jsp页面上弹出层的代码 <!-- 物流详情弹出页面 start --> <s:iterator value="lrVo" var="lrVo" id=&qu

  • [Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码

    [Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码

    很久没有更新博客了,再不写点东西都烂了. 这次更新一个小内容,是两个插件的组合使用,实现头像上传功能. 业务需求: 头像上传功能,要对上传的文件进行剪切,且保证头像到服务器时必须是正方形的. 优化<input type="file">的显示样式,基础的样式实在太难看了. 上传的头像需要进行质量压缩跟大小裁剪,以减缓浏览器的压力. 成果预览: 使用到的技术插件 Jcrop:用于前端"裁剪"图片 bootstrap-fileinput:用于前端优化上传控件样

随机推荐