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文件 document.createElement
Oct 14 Javascript
JavaScript 变量命名规则
Sep 23 Javascript
基于jQuery实现模拟页面加载进度条
Apr 01 Javascript
查看大图功能代码jquery版
Nov 05 Javascript
纯javascript制作日历控件
Jul 17 Javascript
Node.js重新刷新session过期时间的方法
Feb 04 Javascript
JavaScript中误用/g导致的正则test()无法正确重复执行的解决方案
Jul 27 Javascript
简单三步实现报表页面集成天气
Dec 15 Javascript
AngularJS实现的回到顶部指令功能实例
May 17 Javascript
一个Vue视频媒体多段裁剪组件的实现示例
Aug 09 Javascript
vue.js 实现评价五角星组件的实例代码
Aug 13 Javascript
vue项目中锚点定位替代方式
Nov 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入门教程之数组用法汇总(创建,删除,遍历,排序等)
2016/09/11 PHP
php获取文章内容第一张图片的方法示例
2017/07/03 PHP
PHP实现广度优先搜索算法(BFS,Broad First Search)详解
2017/09/16 PHP
thinkPHP框架中执行原生SQL语句的方法
2017/10/25 PHP
PHP安装BCMath扩展的方法
2019/02/13 PHP
JS遮罩层效果 兼容ie firefox jQuery遮罩层
2010/07/26 Javascript
Javascript中找到子元素在父元素内相对位置的代码
2012/07/21 Javascript
你一定会收藏的Nodejs代码片段
2016/02/04 NodeJs
一分钟理解js闭包
2016/05/04 Javascript
jQuery实现区域打印功能代码详解
2016/06/17 Javascript
深入剖析JavaScript面向对象编程
2016/07/12 Javascript
js实现颜色阶梯渐变效果(Gradient算法)
2017/03/21 Javascript
整理关于Bootstrap表单的慕课笔记
2017/03/29 Javascript
jQuery实现简单的抽奖游戏
2017/05/05 jQuery
vue集成kindeditor富文本的实现示例代码
2019/06/07 Javascript
JavaScript修改注册表实例代码
2020/01/05 Javascript
JavaScript find()方法及返回数据实例
2020/04/30 Javascript
将python图片转为二进制文本的实例
2019/01/24 Python
PYQT5设置textEdit自动滚屏的方法
2019/06/14 Python
python绘制多个子图的实例
2019/07/07 Python
numpy ndarray 取出满足特定条件的某些行实例
2019/12/05 Python
python3 使用Opencv打开USB摄像头,配置1080P分辨率的操作
2019/12/11 Python
python读写Excel表格的实例代码(简单实用)
2019/12/19 Python
如何理解python对象
2020/06/21 Python
css3 column实现卡片瀑布流布局的示例代码
2018/06/22 HTML / CSS
美国工业用品采购网站:Zoro.com
2020/10/27 全球购物
新媒传信软件测试面试题
2013/02/24 面试题
团日活动策划书
2014/02/01 职场文书
老同学聚会感言
2014/02/23 职场文书
电子信息专业应届生自荐信
2014/06/04 职场文书
2013年最新自荐信范文
2014/06/23 职场文书
2016机关干部作风建设心得体会
2016/01/21 职场文书
坚持不是死撑,更重要的是心态
2019/08/19 职场文书
读《人生的智慧》有感:闲暇是人生的精华
2019/12/25 职场文书
安装配置mysql及Navicat prenium的详细流程
2021/06/10 MySQL
C#连接ORACLE出现乱码问题的解决方法
2021/10/05 Oracle