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 相关文章推荐
JavaScript的面向对象(一)
Nov 09 Javascript
JavaScript中的16进制字符(改进)
Nov 21 Javascript
在javaScript中关于submit和button的区别介绍
Oct 20 Javascript
js防阻塞加载的实现方法
Sep 09 Javascript
js处理包含中文的字符串实例
Oct 11 Javascript
使用async await 封装 axios的方法
Jul 09 Javascript
在微信小程序里使用watch和computed的方法
Aug 02 Javascript
element vue validate验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项小结【实例代码】
Nov 20 Javascript
Vue动态生成el-checkbox点击无法赋值的解决方法
Feb 21 Javascript
详解如何更好的使用module vuex
Mar 27 Javascript
layui实现图片虚拟路径上传,预览和删除的例子
Sep 25 Javascript
不依任何赖第三方,单纯用vue实现Tree 树形控件的案例
Sep 21 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 大数据量及海量数据处理算法总结
2011/05/07 PHP
php查询内存信息操作示例
2019/05/09 PHP
PHP全局使用Laravel辅助函数dd
2019/12/26 PHP
javascript下数值型比较难点说明
2010/06/07 Javascript
jQuery实现鼠标经过图片预览大图效果
2014/04/10 Javascript
一个JS函数搞定网页标题(title)闪动效果
2014/05/13 Javascript
JQuery查找DOM节点的方法
2015/06/11 Javascript
javascript获取当前的时间戳的方法汇总
2015/07/26 Javascript
在AngularJS框架中处理数据建模的方式解析
2016/03/05 Javascript
NodeJS实现视频转码的示例代码
2017/11/18 NodeJs
Angular网络请求的封装方法
2018/05/22 Javascript
使用Vue自定义指令实现Select组件
2018/05/24 Javascript
Vue源码解析之数组变异的实现
2018/12/04 Javascript
JavaScript canvas实现雪花随机动态飘落
2020/02/08 Javascript
小程序实现背景音乐播放和暂停
2020/06/19 Javascript
Vue3为什么这么快
2020/09/23 Javascript
Python实现股市信息下载的方法
2015/06/15 Python
Django模板变量如何传递给外部js调用的方法小结
2017/07/24 Python
如何利用python查找电脑文件
2018/04/27 Python
python3中property使用方法详解
2019/04/23 Python
Python全局锁中如何合理运用多线程(多进程)
2019/11/06 Python
python 实现简单的FTP程序
2019/12/27 Python
Python字典生成式、集合生成式、生成器用法实例分析
2020/01/07 Python
python 实现在无序数组中找到中位数方法
2020/03/03 Python
CSS3 选择器 属性选择器介绍
2012/01/21 HTML / CSS
html5使用canvas画空心圆与实心圆
2014/12/15 HTML / CSS
HTML5的一个显示电池状态的API简介
2015/06/18 HTML / CSS
HTML5实现桌面通知 提示功能
2017/10/11 HTML / CSS
Canvas获取视频第一帧缩略图的实现
2020/11/11 HTML / CSS
Fossil德国官网:化石手表、手袋、珠宝及配件
2019/12/07 全球购物
AJAX的优缺点都有什么
2015/08/18 面试题
职工运动会感言
2014/02/07 职场文书
优秀实习生主要事迹
2014/05/29 职场文书
党员“四风”方面存在问题及整改措施
2014/09/24 职场文书
团代会闭幕词
2015/01/28 职场文书
同学聚会通知书
2015/04/20 职场文书