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

　　推荐阅读

　　W3C Group的JavaScript1.8 新特性介绍

JavaScript 1.8 计划作为Gecko 1.9(将要合并在Firefox 3中)的一部分开始使用的。比起JavaScript 1.7来说，这只是很小的更新，不过它也确实包含了一些向ECMAScript 4/JavaScript 2进化的痕迹。JavaScript 1.8还将包>>>详细阅读

本文标题：jQuery 图像裁剪插件Jcrop的简单使用

地址：http://www.17bianji.com/kaifa2/JS/28665.html

 1/2    1