繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > JQuery Jcrop 实现图片裁剪的插件
- Javascript
- javascript radio list的实现细节(多浏览器兼容)
- IE在DOM操作有表单控件时的bug
- trim原型函数看js正则表达式的性能
- js 禁用浏览器的后退功能的简单方法
- IE和Firefox下javascript的兼容写法小结
- 兼容ie和firefox js关闭代码
- 用tip解决Ext列宽度不够的问题
- firefox getyear() getFullYear数获取年份的问题
- javascript iFrame研究
- FLASH 广告之外的链接
- firefox TBODY 用js显示和隐藏时出现错位的解决方法
- Javascript 获取LI里的内容
- 比较全的JS checkbox全选、取消全选、删除功能代码
- JS checkbox控制操作代码
- document.all与getElementById、getElementsByName、getElementsByTagName用法区别-document.all
- document.all与getElementById、getElementsByName、getElementsByTagName用法区别-getElementById
- 简单通用的JS滑动门代码
- Javascript select控件操作大全（新增、修改、删除、选中、清空、判断存在等）
- js 提交和设置表单的值
- flash javascript之间的通讯方法小结
Javascript 中的 JQuery Jcrop 实现图片裁剪的插件
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 439 ::
收藏到网摘: n/a
非常不错的模拟 图片裁剪效果的实现代码，文件都是软晨学习网本地的，大家可以直接另存为就可以了。 效果如下图
请“运行代码”先试下运行，运行后请刷新一次，感受下：
点击运行可以看到效果:
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]
目前做的这个项目中要用到用户头像功能，领导说最好是做成用户上传一个图片后可以用图像裁剪的方法自己选择头像。同事推荐了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) All
