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

同事推荐了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]); //设置选中区域

赞 (0)

相关推荐

  • 基于jquery.Jcrop的头像编辑器

    用过新浪微博的朋友对它的头像编辑器都有印象吧.不过人家是用flash做的. 在一个项目中,也用到了同样的东西,本来想直接用新浪微博的,但它有一部分请求路径写到FLASH里面去了,所以只好放弃. 在网上找到了jquery.Jcrop,基本满足了我的需求,但它只是简单的切割而已,还有缩略图没有生成.或许有很多人都需要这类东西吧,于是我把它封装起来了,方便其它朋友直接使用. 官方网址:http://deepliquid.com/content/Jcrop.html 上面有很多demo,有兴趣的可以上去

  • jQuery头像裁剪工具jcrop用法实例(附演示与demo源码下载)

    本文实例讲述了jQuery头像裁剪工具jcrop用法.分享给大家供大家参考,具体如下: 头像裁剪工具目前比较流行的是flash和jquery的.个人觉得用jquery的比较好,因为代码仔细研究一下,基本上能明白怎么回事,想改的话也比较容易. 有一个例子,请参考:jcrop例子demo ,是根jcrop的例子改的,添加以下二个特点: 1,居中显示,并且可拖拉,改变截取的大小 2,预览的图片,根拖拉的大小成比例. 以下是js代码,作了简单的封装 <!DOCTYPE html PUBLIC "-

  • jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享

    网页端 裁剪图片,不需要经过服务器. 这个是用 https://github.com/mailru/FileAPI 框架实现的.配合jcrop. 高级浏览器 使用 canvas 裁剪,ie6 7 8使用 flash过度. 核心代码: var el = $('input').get(0); seajs.use(['gallery/jcrop/0.9.12/jcrop.css','gallery/jcrop/0.9.12/jcrop.js'] ,function(){ FileAPI.event.o

  • jQuery Jcrop插件实现图片选取功能

    jQuery Jcrop插件实现图片选取功能

    总的来说,原理很简单,大致流程是:在浏览器上加载原图 --> 用矩形框在原图上选取区域并将选取的顶点坐标和矩形尺寸发送至服务器 --> 服务器端用图片切割算法切割原图并输出切割后的图片.下面我们就分别对这几个步骤详细展开讨论分析,并在最后附上小demo供大家参考. 1.在页面上加载原图 这个就不用多说了,就是在页面上显示一张图片,一个img标签搞定,不过为了下一步演示,还是贴一下代码 <img src="girl.jpg" alt="" id=&q

  • jquery随机展示头像代码

    jquery随机展示头像代码

    先分析实现思路 需要一个容器,作为头像显示的区域. 容器内部需要头像图片作为展示. 随机每个头像的大小,位置,层级. 头像位置随机范围要减去等于该头像宽高,以限制随机范围不溢出容器. 样式 复制代码 代码如下: *{ margin:0; padding:0;} .Icon-Box{ width:960px; height:700px; margin:0 auto; position:relative;} .Icon-Box li{ position:absolute; list-style:no

  • jQuery实现仿QQ头像闪烁效果的文字闪动提示代码

    jQuery实现仿QQ头像闪烁效果的文字闪动提示代码

    本文实例讲述了jQuery实现仿QQ头像闪烁效果的文字闪动提示代码.分享给大家供大家参考,具体如下: jQuery 闪动的文字提示,仿QQ头像闪烁闪动提示,可以用于错误提示或其他吸引用户注意力的场合. shake(ele,cls,times) ele : jQuery Object [object] 要闪动的元素 cls : Class Name [string] 闪动的类 times : Number [Number] 闪动几次 注意,必须调用jQuery1.4.2及以上版本,否则网页下角会提

  • jQuery选择头像并实时显示的代码

    js: 复制代码 代码如下: //头像选择 function GetFace() { var faceid = $("#SelFace").val(); if (faceid.length == 1) { faceid = "0" + faceid; } $("#imgface").attr("src", "/WebUI/template/images/public/tutu"+faceid+".

  • WordPress JQuery处理沙发头像

    WordPress JQuery处理沙发头像

    我想这对沙发同学不太公平吧.昨天在看yinheli同学的<鼠标悬浮实现显示留言内容>一文(建议看看,好文章),就想到我何不把沙发的头像copy出来然后放在显眼的位置上呢,如下截图效果.做法首先是你的网站加载了JQuery,然后在你需要放置沙发头像的地方添加一个<div>,内容为空即可: 复制代码 代码如下: <div id="shafa"></div> 然后要做的就是利用js复制沙发的头像,并把复制的内容填入上面设定的<div>

  • jQuery jcrop插件截图使用方法

    jQuery jcrop插件截图使用方法

    在后台来进行图片切割.头像截取的原理:在前台使用jcrop获取切面的x轴坐标.y轴坐标.切面高度.切面宽度,然后将这四个值传给后台.在后台要进行放大处理:将切面放大N倍,N=原图/前台展示的头像.即X = X*原图宽/前图宽,Y = Y*原图高/前图高,W = W*原图宽/前图宽,H = H*原图高/前图高.实例:JSP: 复制代码 代码如下: <div id="cutImage" style="display: none;"> <div clas

  • 基于jquery实现人物头像跟随鼠标转动

    基于jquery实现人物头像跟随鼠标转动

    一款非常乖巧的人物头像跟随鼠标转动效果,在浏览器屏幕内,人物脸庞始终面向鼠标转动.其实现原理即同一张图片上作出人物上下左右不同面向的效果,利用JS调用背景图片的位置,以此实现人物"转脸"的jquery特效效果. 先给大家展示效果图,需要的朋友可以下载源码 效果演示  源码下载 具体实现过程不多说了,直接给大家贴代码了. 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q

  • JQuery Jcrop 实现图片裁剪的插件

    JQuery Jcrop 实现图片裁剪的插件

    效果如下图请"运行代码"先试下运行,运行后请刷新一次,感受下: body{ margin:100px auto; text-align:center; } .jcrop-holder { text-align: left; } .jcrop-vline, .jcrop-hline{ font-size: 0; position: absolute; background: white url('http://img.jb51.net/jslib/images/Jcrop.gif') t

  • PHP结合JQueryJcrop实现图片裁切实例详解

    我们经常可以看到一些网站上有图片剪切的功能,或许你会觉得这一功能炫目华丽,神秘莫测!但是今天介绍的一款专用于图片裁切的插件jquery.Jcrop.min.js就将揭开图片剪切的神秘面纱.使用这个插件可以很方便的实现这一功能,使用时仅需鼠标在图片上圈选出选区,即可把图片裁切成所选部分,非常适合用于头像的裁切编辑功能. 本实例演示分为HTML和php两部分: 第一部分,HTML代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio

  • jQuery实现图片上传和裁剪插件Croppie

    jQuery实现图片上传和裁剪插件Croppie

    在很多应用需要上传本地图片然后再按尺寸适当裁剪以符合网站对图片尺寸的要求.最常见的就是各用户系统要求用户上传和裁剪头像的应用.今天我给大家介绍的是一款基于HTML5和jQuery的图片上传和裁剪插件,它叫Croppie. 运行效果图: HTML 首先我们将相关js和css文件载入head中. <script src="jquery.min.js"></script> <script src="croppie.min.js"><

随机推荐