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 相关文章推荐
javascript parseInt 大改造
Sep 27 Javascript
ajax异步刷新实现更新数据库
Dec 03 Javascript
关于jquery的多个选择器的使用示例
Oct 18 Javascript
js showModalDialog 弹出对话框的简单实例(子窗体)
Jan 07 Javascript
jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享
Apr 22 Javascript
JavaScript获取数组最小值和最大值的方法
Jun 09 Javascript
AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】
Nov 02 Javascript
基于Bootstrap分页的实例讲解(必看篇)
Jul 04 Javascript
Vue数字输入框组件示例代码详解
Jan 15 Javascript
vue中axios防止多次触发终止多次请求的示例代码(防抖)
Feb 16 Javascript
google广告之另类js调用实现代码
Aug 22 Javascript
vue3使用vue-router的完整步骤记录
Jun 20 Vue.js
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
php ckeditor上传图片文件名乱码解决方法
2013/11/15 PHP
Yii配置与使用memcached缓存的方法
2016/07/13 PHP
php删除一个路径下的所有文件夹和文件的方法
2018/02/07 PHP
PHP实现登录验证码校验功能
2018/05/17 PHP
PHP创建XML接口示例
2019/07/04 PHP
javascript qq右下角滑出窗口 sheyMsg
2010/03/21 Javascript
jquery实现上下左右滑动的方法
2015/02/09 Javascript
jQuery实现精美的多级下拉菜单特效
2015/03/14 Javascript
javascript函数式编程实例分析
2015/04/25 Javascript
JQuery选择器、过滤器大整理
2015/05/26 Javascript
举例简介AngularJS的内部语言环境
2015/06/17 Javascript
JavaScript对象学习小结
2015/09/02 Javascript
详解javascript的变量与标识符
2016/01/04 Javascript
JavaScript的设计模式经典之代理模式
2016/02/24 Javascript
Fullpage.js固定导航栏-实现定位导航栏
2016/03/17 Javascript
JQuery中解决重复动画的方法
2016/10/17 Javascript
Angular4学习笔记之新建项目的方法
2017/07/18 Javascript
thinkjs 文件上传功能实例代码
2017/11/08 Javascript
利用10行js代码实现上下滚动公告效果
2017/12/08 Javascript
Python实现两款计算器功能示例
2017/12/19 Python
用python爬取租房网站信息的代码
2018/12/14 Python
python调用c++ ctype list传数组或者返回数组的方法
2019/02/13 Python
python3发送邮件需要经过代理服务器的示例代码
2019/07/25 Python
使用Pycharm(Python工具)新建项目及创建Python文件的教程
2020/04/26 Python
详解pandas映射与数据转换
2021/01/22 Python
微软俄罗斯官方网站:Microsoft俄罗斯
2016/09/18 全球购物
八一慰问活动方案
2014/02/07 职场文书
安全生产活动月方案
2014/03/09 职场文书
学生会主席竞聘书
2014/03/31 职场文书
仲裁协议书
2014/09/26 职场文书
四风问题查摆剖析材料
2014/10/11 职场文书
介绍信怎么写
2015/05/05 职场文书
2015党建工作简报
2015/07/21 职场文书
《狼王梦》读后感:可怜天下父母心
2019/11/01 职场文书
MySQL8.0.24版本Release Note的一些改进点
2021/04/22 MySQL
Tomcat安装使用及部署Web项目的3种方法汇总
2022/08/14 Servers