欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

jQuery 图像裁剪插件Jcrop的简单使用_jquery

程序员文章站 2024-01-13 13:14:16
...
同事推荐了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代码部分:
复制代码 代码如下:

jQuery 图像裁剪插件Jcrop的简单使用_jquery

js部分:
复制代码 代码如下:

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

这样就可以在图片上进行裁剪了。
2.得到选中区域的坐标以及回调函数
html代码部分如下:
复制代码 代码如下:

jQuery 图像裁剪插件Jcrop的简单使用_jquery







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