jQuery 图像裁剪插件Jcrop的简单使用


Posted in Javascript onMay 22, 2009

同事推荐了Jcrop这个插件,到它的官方站点http://deepliquid.com/content/Jcrop.html下载了最新版的压缩包,压缩包中包括了Jcrop的几个demo文件,关键的Jcrop.js文件和jQuery.Jcrop.css文件。基本上来说参照它的几个demo文件就可以学会使用这个插件了。晚上正好学习研究了下,现简单总结如下,也方便下英文不好的朋友们。
使用插件必须条件:引入jQuery.js文件,引入jQuery.Jcrop.js文件,引入JQuery.Jcrop.css文件。
1.最基本使用方法
html代码部分:

<img src="demo_files/flowers.gif" id="demoImage"/>

js部分:
$( 
function() 
{ 
$("#demoImage").Jcrop(); 
} 
);

这样就可以在图片上进行裁剪了。
2.得到选中区域的坐标以及回调函数
html代码部分如下:
<img src="demo_files/flowers.jpg" id="demoImage" /> 
<label>x1</label><input type="text" id="txtX1" /> 
<label>y1</label><input type="text" id="txtY1" /> 
<label>x2</label><input type="text" id="txtX2" /> 
<label>y2</label><input type="text" id="txtY2" /> 
<label>width</label><input type="text" id="txtWidth" /> 
<label>height</label><input type="text" id="txtHeight" />

js代码部分如下: 
$( 
function() { 
//事件处理 
$("#demoImage").Jcrop( 
{ 
onChange:showCoords, //当选择区域变化的时候,执行对应的回调函数 
onSelect:showCoords //当选中区域的时候,执行对应的回调函数 
} 
); 
} 
); 
function showCoords(c) { 
$("#txtX1").val(c.x); //得到选中区域左上角横坐标 
$("#txtY1").val(c.y); //得到选中区域左上角纵坐标 
$("#txtX2").val(c.x2); //得到选中区域右下角横坐标 
$("#txtY2").val(c.y2); //得到选中区域右下角纵坐标 
$("#txtWidth").val(c.w); //得到选中区域的宽度 
$("#txtHeight").val(c.h); //得到选中区域的高度 
}

3.常用选项设置
aspectRatio:选中区域按宽/高比,为1表示正方形。
minSize:最小的宽,高值。
maxSize:最大的宽,高值。
setSelect:设置初始选中区域。
bgColor:背景颜色
bgOpacity:背景透明度。
allowResize:是否允许改变选中区域大小。
allowMove:是否允许移动选中区域。
举例如下: 
$( 
function() { 
$("#demoImage").Jcrop({ 
aspectRatio: 1, //选中区域宽高比为1,即选中区域为正方形 
bgColor:"#ccc", //裁剪时背景颜色设为灰色 
bgOpacity:0.1, //透明度设为0.1 
allowResize:false, //不允许改变选中区域的大小 
setSelect:[0,0,100,100] //初始化选中区域 
} 
); 
} 
);

4.api用法
var api = $.Jcrop("#demoImage"); 
api.disable(); //设置为禁用裁剪效果 
api.enable(); //设置为启用裁剪效果 
api.setOptions({allowResize:false});//设置相应配置 
api.setSelect([0,0,100,100]); //设置选中区域
Javascript 相关文章推荐
js的event详解。
Sep 06 Javascript
Mootools 1.2教程 Tooltips
Sep 15 Javascript
JQuery操作tr和td内容的方法实例
Mar 06 Javascript
js导航菜单(自写)简单大方
Mar 28 Javascript
jQuery插件PageSlide实现左右侧栏导航菜单
Apr 12 Javascript
jquery图片轮播特效代码分享
Apr 20 Javascript
vue计算属性时v-for处理数组时遇到的一个bug问题
Jan 21 Javascript
详解vuex中mapState,mapGetters,mapMutations,mapActions的作用
Apr 13 Javascript
vue将毫秒数转化为正常日期格式的实例
Sep 16 Javascript
JS前端知识点总结之内置对象,日期对象和定时器相关操作
Jul 05 Javascript
js 实现ajax发送步骤过程详解
Jul 25 Javascript
layui table数据修改的回显方法
Sep 04 Javascript
document.compatMode介绍
May 21 #Javascript
各种常用浏览器getBoundingClientRect的解析
May 21 #Javascript
简单的js分页脚本
May 21 #Javascript
input+select(multiple) 实现下拉框输入值
May 21 #Javascript
一些Javascript的IE和Firefox(火狐)兼容性的问题总结及常用例子
May 21 #Javascript
Javascript 兼容firefox的一些问题
May 21 #Javascript
鼠标经过的文本框textbox变色
May 21 #Javascript
You might like
PHP网站提速三大“软”招
2006/10/09 PHP
mysql5详细安装教程
2007/01/15 PHP
php获取CSS文件中图片地址并下载到本地的方法
2014/12/02 PHP
php中stdClass的用法分析
2015/02/27 PHP
php把数组值转换成键的方法
2015/07/13 PHP
Yii中的relations数据关联查询及统计功能用法详解
2016/07/14 PHP
php字符串操作常见问题小结
2016/10/11 PHP
PHP实现的服务器一致性hash分布算法示例
2018/08/09 PHP
PHP与Web页面的交互示例详解一
2020/08/04 PHP
dreamweaver 安装Jquery智能提示
2011/04/02 Javascript
jQuery 常见操作实现方式和常用函数方法总结
2011/05/06 Javascript
jQuery源码分析-05异步队列 Deferred 使用介绍
2011/11/14 Javascript
js 编码转换 gb2312 和 utf8 互转的2种方法
2013/08/07 Javascript
javascript版2048小游戏
2015/03/18 Javascript
jquery+css3实现网页背景花瓣随机飘落特效
2015/08/17 Javascript
教你如何在Node.js中使用jQuery
2016/08/28 Javascript
js实现背景图自适应窗口大小
2017/01/10 Javascript
Nodejs--post的公式详解
2017/04/29 NodeJs
vue-axios使用详解
2017/05/10 Javascript
在 Angular6 中使用 HTTP 请求服务端数据的步骤详解
2018/08/06 Javascript
Vue组件Draggable实现拖拽功能
2018/12/01 Javascript
微信小程序 textarea 层级过高问题简单解决方案
2019/10/14 Javascript
python3.6根据m3u8下载mp4视频
2019/06/17 Python
python3 打印输出字典中特定的某个key的方法示例
2019/07/06 Python
python内存监控工具memory_profiler和guppy的用法详解
2019/07/29 Python
Python实现CAN报文转换工具教程
2020/05/05 Python
Python定时任务APScheduler原理及实例解析
2020/05/30 Python
pyspark对Mysql数据库进行读写的实现
2020/12/30 Python
HTML5中的网络存储实现方式
2020/04/28 HTML / CSS
Html5+CSS3+EL表达式问题小结
2020/12/19 HTML / CSS
贝斯特韦斯特酒店集团官网:Best Western
2019/01/03 全球购物
东南亚冒险旅行与活动:Adventoro
2019/10/16 全球购物
乐高瑞士官方商店:LEGO CH
2020/08/16 全球购物
光电信息专业应届生求职信
2013/10/07 职场文书
十八大报告观后感
2014/01/28 职场文书
2016年最美孝心少年事迹材料
2016/02/26 职场文书