jcrop基本参数一览


Posted in Javascript onJuly 16, 2013

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]
Javascript 相关文章推荐
基于Jquery的文字自动截取(提供源代码)
Aug 09 Javascript
JavaScript实现url地址自动检测并添加URL链接示例代码
Nov 12 Javascript
js检测输入内容全为空格的方法
May 03 Javascript
Javascript监视变量变化的方法
Jun 09 Javascript
基于JavaScript实现一定时间后去执行一个函数
Dec 14 Javascript
基于Vuejs实现购物车功能
Aug 02 Javascript
JavaScript获取ul中li个数的方法
Feb 13 Javascript
vue项目中引入noVNC远程桌面的方法
Mar 05 Javascript
webpack 样式加载的实现原理
Jun 12 Javascript
JavaScript控制浏览器全屏显示简单示例
Jul 05 Javascript
vue键盘事件点击事件加native操作
Jul 27 Javascript
vue 实现超长文本截取,悬浮框提示
Jul 29 Javascript
jQuery实现鼠标滑过遮罩并高亮显示效果
Jul 16 #Javascript
jquery特效 幻灯片效果示例代码
Jul 16 #Javascript
jQuery .attr()和.removeAttr()方法操作元素属性示例
Jul 16 #Javascript
js判断屏幕分辨率的代码
Jul 16 #Javascript
js 调用父窗口的具体实现代码
Jul 15 #Javascript
JavaScript实现点击按钮后变灰避免多次重复提交
Jul 15 #Javascript
JS 去前后空格大全(IE9亲测)
Jul 15 #Javascript
You might like
CentOS 7.2 下编译安装PHP7.0.10+MySQL5.7.14+Nginx1.10.1的方法详解(mini版本)
2016/09/01 PHP
Smarty3配置及入门语法
2017/02/22 PHP
PHP实现超简单的SSL加密解密、验证及签名的方法示例
2017/08/28 PHP
PHP var关键字相关原理及使用实例解析
2020/07/11 PHP
List the Codec Files on a Computer
2007/06/18 Javascript
js兼容标准的表格变色效果
2008/06/28 Javascript
ext 同步和异步示例代码
2009/09/18 Javascript
JavaScript高级程序设计 阅读笔记(七) ECMAScript中的语句
2012/02/27 Javascript
AngularJS中$interval的用法详解
2016/02/02 Javascript
JavaScript实现多种排序算法
2016/02/24 Javascript
bootstrap weebox 支持ajax的模态弹出框
2017/02/23 Javascript
jQuery Pagination分页插件使用方法详解
2017/02/28 Javascript
jQuery动态追加页面数据以及事件委托详解
2017/05/06 jQuery
ES6深入理解之“let”能替代”var“吗?
2017/06/28 Javascript
判断div滑动到底部的scroll实例代码
2017/11/15 Javascript
浅谈webpack性能榨汁机(打包速度优化)
2019/01/09 Javascript
vue父子组件通信的高级用法示例
2019/08/29 Javascript
Vue 实现从文件中获取文本信息的方法详解
2019/10/16 Javascript
全面解析JavaScript Module模式
2020/07/24 Javascript
微信小程序通过websocket实时语音识别的实现代码
2020/08/19 Javascript
关于vue属性使用和不使用冒号的区别说明
2020/10/22 Javascript
Python实现的tab文件操作类分享
2014/11/20 Python
python通过装饰器检查函数参数数据类型的方法
2015/03/13 Python
使用Python对Excel进行读写操作
2017/03/30 Python
windows下安装Python的XlsxWriter模块方法
2018/05/03 Python
15行Python代码实现网易云热门歌单实例教程
2019/03/10 Python
欧缇丽英国官方网站:Caudalie英国
2016/08/17 全球购物
HEMA英国:荷兰原创设计
2018/08/28 全球购物
美国在线购物频道:Shop LC
2019/04/21 全球购物
大学生自我鉴定
2013/12/16 职场文书
办公室个人总结
2015/02/28 职场文书
2016年暑假学生家长评语
2015/12/01 职场文书
银行客户经理培训心得体会
2016/01/09 职场文书
2016年小学党支部创先争优活动总结
2016/04/05 职场文书
WordPress多语言翻译插件 - WPML使用教程
2021/04/01 PHP
Windows Server 2012 修改远程默认端口3389的方法
2022/04/28 Servers