jQuery 图像裁剪插件Jcrop的简单使用
2009-05-22 00:00
996 查看
同事推荐了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代码部分:
js部分:
这样就可以在图片上进行裁剪了。
2.得到选中区域的坐标以及回调函数
html代码部分如下:
js代码部分如下:
3.常用选项设置
aspectRatio:选中区域按宽/高比,为1表示正方形。
minSize:最小的宽,高值。
maxSize:最大的宽,高值。
setSelect:设置初始选中区域。
bgColor:背景颜色
bgOpacity:背景透明度。
allowResize:是否允许改变选中区域大小。
allowMove:是否允许移动选中区域。
举例如下:
4.api用法
使用插件必须条件:引入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]); //设置选中区域
相关文章推荐
- jQuery 图像裁剪插件Jcrop的简单使用
- jQuery的图像裁剪插件Jcrop的简单使用
- java开发中常用插件二jcrop---jQuery 图像裁剪插件
- 自定义裁剪和缩放图像的jQuery插件Cropit使用的大坑
- jQuery 图像裁剪插件Jcrop
- 【jQuery插件】使用cropper实现简单的头像裁剪并上传
- JQuery 图像裁剪插件Jcrop实现图片上传功能(mysql DB)
- jQuery 图像裁剪插件Jcrop
- JQuery上传插件Uploadify + Jcrop图像裁剪的几个常用小技巧
- jQuery的图像裁剪插件Jcrop
- 简单测试实现 博客园的头像上传功能 使用插件jquery jcrop+fineupload
- j2ee 简单网站搭建:(九)jquery datatables + jquery ui dialog 插件使用入门
- 35 个高级但使用简单的 jQuery 插件
- 35 个高级但使用简单的 jQuery 插件
- 五滴水:使用Ajax+jQuery来实现前端收到的数据在console上显示+简单的主页设计与bootstrap插件实现图片轮播
- jQuery地图插件jVectorMap的简单使用
- 头像裁剪插件Jcrop的使用示例
- jQuery表单验证插件 - 使用方式非常简单,明了
- 时时刷新 jQuery Timers插件 提供定时执行的功能,使用非常简单
- 时时刷新 jQuery Timers插件 提供定时执行的功能,使用非常简单