jcrop 用法小结

官方站点http://deepliquid.com/content/Jcrop.html 。下载了最新版的压缩包，压缩包中包括了Jcrop的几个demo文件，关键的Jcrop.js文件和jQuery.Jcrop.css文件。

基本上来说参照它的几个demo文件就可以学会使用这个插件了。晚上正好学习研究了下，现简单总结如下：
使用插件必须条件：引入jQuery.js文件，引入jQuery.Jcrop.js文件，引入JQuery.Jcrop.css文件。
1.最基本使用方法

$(
function()
{
$("#demoImage").Jcrop();
}
);

2.得到选中区域的坐标以及回调函数

$(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]); //设置选中区域

jcrop 用法小结相关推荐

oracle @spool,Oracle spool 用法小结
Oracle spool 用法小结转自:http://wallimn.javaeye.com/blog/472182 对于SPOOL 数据的SQL,最好要自己定义格式,以方便程序直接导入,SQL语句 ...
js push(),pop(),unshift(),shift()的用法小结
js中push(),pop(),unshift(),shift()的用法小结 1.push().pop()和unshift().shift() 这两组同为对数组的操作,并且会改变数组的本身的长度及内容 ...
C++ :: 的用法小结
原文:http://blog.csdn.net/whz_zb/article/details/6843369 :: 的用法小结: 用于将类内声明的静态数据成员在类外初始化: 用于将类内声明的函数成员在 ...
Java中getResourceAsStream的用法小结
2019独角兽企业重金招聘Python工程师标准>>> Java中getResourceAsStream的用法小结一.Java中的getResourceAsStream主要有以下三 ...
setscale方法的用法_基于BigDecimal.setScale的用法小结
1. BigDecimal num1 = new BigDecimal(2.225667);//这种写法不允许,会造成精度损失 2. BigDecimal num2 = new BigDecimal( ...
java.nio.ByteBuffer用法小结
转载自 java.nio.ByteBuffer用法小结在NIO中,数据的读写操作始终是与缓冲区相关联的.读取时信道(SocketChannel)将数据读入缓冲区,写入时首先要将发送的数据按顺序填入 ...
jsoup解析HTML用法小结
转载自 jsoup解析HTML用法小结使用HttpClient+jsoup做采集器有一段时间了,发现jsoup很好用,而且还有很多方便的东西都没怎么用上.于是想根据官网上的cookbook来对j ...
［转］ssh常用用法小结
ssh常用用法小结 1.连接到远程主机: 命令格式 : ssh name@remoteserver 或者 ssh remoteserver -l name 说明:以上两种方式都可以远程登录到远程主机, ...
Linux: chmod 和 chown用法小结
chmod chmod指令是更改文件读写执行权限的. 文件权限可以通过ls -a或ll来看,在每个文件前有10个字符,第一个是d是文件夹,否则为一划.后面三组rwx,分别是读取,写入和执行的权限; 三 ...

jcrop 用法小结

jcrop 用法小结相关推荐

最新文章

热门文章