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中各种数据的类型方法之typeof与0bject.prototype.toString讲解
Nov 07 Javascript
浅析js设置控件的readonly与enabled属性问题
Dec 25 Javascript
jquery实现checkbox全选全不选的简单实例
Dec 31 Javascript
用简洁的jQuery方法toggleClass实现隔行换色
Oct 22 Javascript
jQuery Validation Plugin验证插件手动验证
Jan 26 Javascript
node模块机制与异步处理详解
Mar 13 Javascript
解析javascript图片懒加载与预加载的分析总结
Oct 27 Javascript
微信小程序  audio音频播放详解及实例
Nov 02 Javascript
总结几道关于Node.js的面试问题
Jan 11 Javascript
Vue数据双向绑定原理及简单实现方法
May 18 Javascript
详解Vue单元测试case写法
May 24 Javascript
vue遍历生成的输入框 绑定及修改值示例
Oct 30 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
mysql5详细安装教程
2007/01/15 PHP
php中强制下载文件的代码(解决了IE下中文文件名乱码问题)
2011/05/09 PHP
php shell超强免杀、减少体积工具实现代码
2012/10/16 PHP
PHP微信开发之二维码生成类
2015/06/26 PHP
PHP学习记录之常用的魔术常量详解
2019/12/12 PHP
swoole锁的机制代码实例讲解
2021/03/04 PHP
JavaScript Konami Code 实现代码
2009/07/29 Javascript
HTML中的setCapture和releaseCapture使用介绍
2012/03/21 Javascript
JavaScript学习小结(7)之JS RegExp
2015/11/29 Javascript
JS实现根据密码长度显示安全条功能
2017/03/08 Javascript
JavaScript表单即时验证 验证不成功不能提交
2017/08/31 Javascript
详解ES6语法之可迭代协议和迭代器协议
2018/01/13 Javascript
Vue.js做select下拉列表的实例(ul-li标签仿select标签)
2018/03/02 Javascript
Vue 页面切换效果之 BubbleTransition(推荐)
2018/04/08 Javascript
详解Vue CLI3 多页应用实践和源码设计
2018/08/30 Javascript
详解Vue组件插槽的使用以及调用组件内的方法
2018/11/13 Javascript
JavaScript中的相等操作符使用详解
2019/12/21 Javascript
Python批量按比例缩小图片脚本分享
2015/05/21 Python
python实现域名系统(DNS)正向查询的方法
2016/04/19 Python
基于Linux系统中python matplotlib画图的中文显示问题的解决方法
2017/06/15 Python
python编程通过蒙特卡洛法计算定积分详解
2017/12/13 Python
浅述python2与python3的简单区别
2018/09/19 Python
pandas.dataframe按行索引表达式选取方法
2018/10/30 Python
8种用Python实现线性回归的方法对比详解
2019/07/10 Python
详解python statistics模块及函数用法
2019/10/27 Python
使用SimpleITK读取和保存NIfTI/DICOM文件实例
2020/07/01 Python
CSS3 实现发光边框特效
2020/11/11 HTML / CSS
canvas实现扭蛋机动画效果的示例代码
2018/10/17 HTML / CSS
int *p=NULL和*p= NULL有什么区别
2014/10/23 面试题
班长演讲稿范文
2014/04/24 职场文书
项目负责人任命书
2014/06/04 职场文书
运动会跳远广播稿5篇
2014/09/17 职场文书
离婚协议书范文2015
2015/01/26 职场文书
合作合同协议书范本
2015/01/27 职场文书
给领导敬酒词
2015/08/12 职场文书
Python数据分析之绘图和可视化详解
2021/06/02 Python