Jcrop使用方法
来源:互联网 发布:吃月饼猜9字网络流行语 编辑:程序博客网 时间:2024/06/05 20:37
Jcrop是一个jQuery图片裁剪插件,它能为你的WEB应用程序快速简单地提供图片裁剪的功能。特点如下:
- 对所有图片均unobtrusively(无侵入的,保持DOM简洁)
- 支持宽高比例锁定
- 支持 minSize/maxSize设置
- 支持改变选区或移 动选区时的回调(Callback)
- 支持用键盘微调选区
- 通过API创建互动,比如动画效果
- 支持CSS样式
版本及Demo
- jQuery v1.5.1+
- Jcrop v0.9.9
- Demo地址:http://code.ciaoca.com/jquery/jcrop/demo/
- 下载地址:http://deepliquid.com/content/Jcrop_Download.html
options 参数说明(可选)
参数名默认值参数说明allowSelecttrue允许新选框allowMovetrue允许选框移动allowResizetrue允许选框缩放trackDocumenttrue baseClass"jcrop"基础样式名前缀。说明:class="jcrop-holder",更改的只是其中的 jcrop。addClassnull添加样式。假设class名为 "test",则添加样式后为class="test jcrop-holder"bgColor"black"背景颜色。颜色关键字、HEX、RGB 均可。bgOpacity0.6背景透明度bgFadefalse是否使用背景过渡效果borderOpacity0.4选框边框透明度handleOpacity0.5缩放按钮透明度handleSize9缩放按钮大小handleOffset5缩放按钮与边框的距离aspectRatio0选框宽高比。说明:width/heightkeySupporttrue支持键盘控制。按键列表:上下左右(移动)、Esc(取消)、Tab(跳出裁剪框,到下一个)cornerHandlestrue允许边角缩放sideHandlestrue允许四边缩放drawBorderstrue绘制边框dragEdgestrue允许拖动边框fixedSupporttrue touchSupportnull boxWidth0画布宽度boxHeight0画布高度boundary2边界。说明:可以从边界开始拖动鼠标选择裁剪区域fadeTime400过度效果的时间animationDelay20动画延迟swingSpeed3过渡速度minSelect[0,0]选框最小选择尺寸。说明:若选框小于该尺寸,则自动取消选择maxSize[0,0]选框最大尺寸minSize[0,0]选框最小尺寸onChangefunction(){}选框改变时的事件onSelectfunction(){}选框选定时的事件onReleasefunction(){}取消选框时的事件使用方法
载入CSS文件
载入JavaScript文件
给图像标签加上ID
调用Jcrop
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()启用 Jcropdestroy()移除 JcroptellSelect()获取选框的值(实际尺寸)。例子:console.log(jcrop_api.tellSelect())tellScaled()获取选框的值(界面尺寸)。例子:console.log(jcrop_api.tellScaled())getBounds()获取图片实际尺寸,格式为:[w,h]getWidgetSize()获取图片显示尺寸,格式为:[w,h]getScaleFactor()获取图片缩放的比例,格式为:[w,h] 0 0
- Jcrop使用方法
- jQuery jcrop插件截图使用方法
- jQuery jcrop插件截图使用方法
- jQuery jcrop插件截图使用方法
- Jquery Jcrop 插件java的使用方法 包括图片保存类
- jcrop 用法小结
- jQuery.jcrop 基本参数
- jcrop基本参数一览
- jcrop 图片压缩剪切
- 图片裁剪入门Jcrop
- jcrop基本参数一览
- Jcrop使用心得
- Jcrop图像裁剪
- 图片裁剪 jcrop
- jquery.Jcrop API详解
- jQuery Jcrop 图像裁剪
- jQuery Jcrop 图像裁剪
- 照片剪裁-jcrop
- 【MySQL】性能优化之 Index Condition Pushdown
- mysql获取第n条记录
- uc/os-iii学习笔记-任务管理
- uva-10115 - Automatic Editing
- Android地位的4大方式
- Jcrop使用方法
- Java Swing JTable 表格【16:复选框JCheckBox作为表格元素】
- 现在云战争(真的)开始了
- 外键以及外键约束简介
- 支付宝提示:由于您的设备缺少根目录,无法校验该访问站点的安全性,可能存在风险,请选择是否继续
- java面向对象基础
- 机器学习(1):基本概念
- csdn如何转载别人的文章
- iOS-copy与mutableCopy浅析