无为清净楼资源网

jcrop基本参数一览
网络编程 2024/11/18 佚名
3 2
无为清净楼资源网 Design By www.qnjia.com

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

基本使用方法如下：

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

<link rel="stylesheet" href="css/jquery.Jcrop.css">
<script src="/UploadFiles/2021-04-02/jquery.js"><script src="js/jquery.Jcrop.js">

二、在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="/UploadFiles/2021-04-02/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]

标签：
jcrop
无为清净楼资源网 Design By www.qnjia.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
无为清净楼资源网 Design By www.qnjia.com
www.qnjia.com 无为清净楼资源网
139,976互联网资源
144,792高清电影
21,817无损音乐
631,128技术资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接