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 相关文章推荐
JQuery 插件模板 制作jquery插件的朋友可以参考下
Mar 17 Javascript
JavaScript高级程序设计 阅读笔记(十二) js内置对象Math
Aug 14 Javascript
JS使用replace()方法和正则表达式进行字符串的搜索与替换实例
Apr 10 Javascript
JavaScript中函数表达式和函数声明及函数声明与函数表达式的不同
Nov 15 Javascript
基于jQuery实现放大镜特效
Oct 19 Javascript
jQuery Ajax File Upload实例源码
Dec 12 Javascript
创建一般js对象的几种方式
Jan 19 Javascript
原生js实现可拖动的登录框效果
Jan 21 Javascript
Angular实现的简单定时器功能示例
Dec 28 Javascript
使用async、enterproxy控制并发数量的方法详解
Jan 02 Javascript
微信小程序实现星级评价效果
Dec 28 Javascript
vue实现动态按钮功能
May 13 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解答方法
2012/02/04 PHP
php实现读取超大文件的方法
2014/07/28 PHP
php使用Jpgraph绘制简单X-Y坐标图的方法
2015/06/10 PHP
laravel 框架配置404等异常页面
2019/01/07 PHP
laravel-admin 管理平台获取当前登陆用户信息的例子
2019/10/08 PHP
Laravel (Lumen) 解决JWT-Auth刷新token的问题
2019/10/24 PHP
使用js获取QueryString的方法小结
2010/02/28 Javascript
actionscript与javascript的区别
2011/05/25 Javascript
jquery如何获取复选框的值
2013/12/12 Javascript
Javascript中的包装类型介绍
2015/04/02 Javascript
AngularJS 过滤器的简单实例
2016/07/27 Javascript
AngularJS中过滤器的使用与自定义实例代码
2016/09/17 Javascript
微信小程序 label 组件详解及简单实例
2017/01/10 Javascript
jQuery实现淡入淡出的模态框
2017/02/09 Javascript
jquery操作select取值赋值与设置选中实例
2017/02/28 Javascript
微信小程序 自定义消息提示框
2017/08/06 Javascript
Iphone手机、安卓手机浏览器控制默认缩放大小的方法总结(附代码)
2017/08/18 Javascript
基于Vue2实现简易的省市区县三级联动组件效果
2018/11/05 Javascript
Vue.js获取手机系统型号、版本、浏览器类型的示例代码
2020/05/10 Javascript
[41:17]完美世界DOTA2联赛PWL S3 access vs CPG 第二场 12.13
2020/12/17 DOTA
Python操作MongoDB数据库PyMongo库使用方法
2015/04/27 Python
python类装饰器用法实例
2015/06/04 Python
简单了解django缓存方式及配置
2019/07/19 Python
python 安装教程之Pycharm安装及配置字体主题,换行,自动更新
2020/03/13 Python
Pymysql实现往表中插入数据过程解析
2020/06/02 Python
Booking.com缤客中国:全球酒店在线预订网站
2020/05/03 全球购物
施华洛世奇中国官网:SWAROVSKI中国
2020/06/16 全球购物
彪马香港官方网上商店:PUMA香港
2020/12/06 全球购物
招聘与培训专员岗位职责
2014/01/30 职场文书
理财投资建议书
2014/03/12 职场文书
教师廉洁自律个人总结
2015/02/10 职场文书
农村党员干部承诺书
2015/05/04 职场文书
信用卡催款律师函
2015/05/27 职场文书
python scrapy简单模拟登录的代码分析
2021/07/21 Python
Mysql超详细讲解死锁问题的理解
2022/04/01 MySQL
SQL Server使用导出向导功能
2022/04/08 SQL Server