jquery jcrop java_jcrop基本参数一览
jcrop原始下载页面:猛击此处
基本使用方法如下:
一、在head部分(
和之间)插入相关css和js文件。
二、在head部分插入回调函数等相关处理参数。
三、给相关图片加上id以便识别。
这样就能实现最简单的裁剪效果,至于如何结合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]
jquery jcrop java_jcrop基本参数一览相关推荐
- 使用jquery jcrop插件进行图片的截取与保存
第一步:上传大图片到服务器,并且展示到页面 第二部:调用jcrop组件js及css <script src="${ctx}/js/jquery-jcrop/jquery.Jcrop.j ...
- jQuery Jcrop API参数说明
jQuery Jcrop API参数说明(中文版) Jcrop是一个jQuery图片裁剪插件,它能为你的WEB应用程序快速简单地提供图片裁剪的功能.特点如下: 对所有图片均unobtrusively( ...
- php jq截图插件,jQuery jcrop插件截图使用方法_jquery
在后台来进行图片切割. 头像截取的原理:在前台使用jcrop获取切面的x轴坐标.y轴坐标.切面高度.切面宽度,然后将这四个值传给后 台.在后台要进行放大处理:将切面放大N倍,N=原图/前台展示的头像. ...
- (转)有了jQuery.Jcrop,选取美女的哪个部位你说了算
原文地址:http://www.cnblogs.com/sxwgf/archive/2011/11/21/2256645.html 哈哈,亲们,真的不愿意相信你们是被标题吸引进来的,但事实让我不得不承 ...
- jQuery ajax的traditional参数的作用
一般的,可能有些人在一个参数有多个值的情况下,可能以某个字符分隔的形式传递,比如页面上有多个checkbox: $.ajax{url:"xxxx",data:{p: "1 ...
- ajax webservice 参数类型,JQuery Ajax WebService传递参数的简单实例
Asp.NET中利用jQuery实现Ajax时,在服务器端可以使用aspx,ashx,以及WebService等方式.最近研究了一下WebService方式,jQuery Ajax 方法调用 jQue ...
- jQuery事件之传递参数
jQuery事件之传递参数 转载▼ 我们经常使用jQuery中给DOM元素绑定事件来执行一些动态的功能,但是很少有人知道在jQuery中是如何来给DOM元素传递参数以及如何绑定自己定义的事件. ...
- jquery中ajax中的参数,jquery中的ajax参数
jquery中将ajax封装成了函数,我们使用起来非常方便,jquery会自动根据内容选择post还是get方式提交数据,并且会自动编码,但是要想完全掌握jquery中的ajax,我们必须将它的各个参 ...
- 高通Atheros所有WiFi芯片型号参数一览
Atheros是一家年轻的公司,该公司是基于OFDM的无线网络技术厂商,提供基于IEEE802.11a 5-GHz的芯片组,还拓展了蓝牙.GPS.以太网等领域的开发.Atheros 的主力 WiFi ...
最新文章
- 数据库多个表内容合并
- Windows x64内核学习笔记(三)—— SMEP SMAP
- c oracle实体模型,ADO.NET实体数据模型详细介绍
- c语言程序设计电大作业,2018年最新电大C语言程序设计作业答案.doc
- 移动端web开发技巧
- 微型计算机在机械设计中的应用,浅谈计算机技术在机械设计制造及自动化中的应用.docx...
- 基于DEAP库的python进化算法-4.遗传算法求解TSP问题
- oracle 用户被锁定解决方法
- mmdetection的使用
- 【Xilinx FPGA】vivado工具下载安装
- 移动通信网络规划:误码率
- 织梦DedeCMS网站源代码分析详解
- 用安卓手机搭建一个可用渗透测试环境/安卓手机搭建linux环境
- oracle nologging append 注意
- Excel单元格首位数字为“0”不显示的问题
- 2023华为OD机试备考攻略 以及题库目录分值说明 考点说明
- png转成SVG方法
- gom引擎Gompj.dll跟Key.lic做什么的
- 根据污水处理厂的实际情况选型及校准方案
- 写在入职两周年纪念日
热门文章
- 沈阳生态所在保护性耕作促进农业可持续发展方面取得新进展
- The Innovation | ESCI Indexing
- BiB:王秀杰/裴小兵合作开发单细胞组学细胞标记基因鉴定算法COSG
- 一作解读:EID-2017-宏基因组测序在新发腹泻病毒鉴定中的应用
- R语言泊松回归(poisson)模型案例:基于robust包的Breslow癫痫数据集
- plotly可视化绘制多子图(subplots)并自定义坐标轴
- 连接php的作用是什么,什么是超链接,有什么作用
- R语言包_dplyr_1
- 汪国华 基因组分析的生物信息学算法
- Linux下autoreconfig命令安装.