论坛交流
首页| 办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库 |  Asp.net  | Flash AS
当前位置 > 文字教程 > Javascript教程
Tag:验证,特效,入门,实例,验证,表单,特效,正则表达式,跑马灯,document,函数,代码,getElementByID,菜单,图片,视频教程

JavaScript在线裁剪图片jquery插件Jcrop

文章类别：Javascript | 发表日期:2010-6-18 10:00:33

入门
• 下载js插件页面
• 放到页面相应的位置
• 同时也需要加载jquery

加载顺序
•jQuery
•Jcrop
•Jcrop CSS样式
如：
代码:
<script src="js/jquery.pack.js"></script>
<script src="js/jquery.Jcrop.pack.js"></script>
<link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />

调用
假如：
代码:
<img src="flowers.jpg" id="cropbox" />
编写以下脚本
代码:
<script language="Javascript">
    jQuery(function() {
        jQuery('#cropbox').Jcrop();
    });
</script>
Jcrop就可以激活了

事件处理
Jcrop有2个主要的事件处理程序 onChange 和 onSelect.

onSelect  callback  选择完成后调用  
onChange  callback  选框移动（或者说改变）时调用  

定义一个事件出来函数
代码:
<script language="Javascript">
  function showCoords(c)
  {
      // variables can be accessed here as
      // c.x, c.y, c.x2, c.y2, c.w, c.h
  };
</script>
然后附加上去
代码:
<script language="Javascript">
    jQuery(function() {
        jQuery('#cropbox').Jcrop({
            onSelect: showCoords,
            onChange: showCoords
        });
    });
</script>
这是一个标准的jquery语法，注意最后一个属性后面没有逗号

设置选项
参数名称  类型  描述  默认  
aspectRatio  decimal  设定宽高比 n/a  
minSize  array [ w, h ]  设置最小尺寸 n/a  
maxSize  array [ w, h ]  设置最大尺寸 n/a  
setSelect  array [ x, y, x2, y2 ]  设置一个初选框的位置 n/a  
bgColor  color value  设置背景容器颜色 'black'  
bgOpacity  decimal 0 - 1  设置当图像被裁剪选框外的透明度 .6  

如：
代码:
<script language="Javascript">
    jQuery(function() {
        jQuery('#cropbox').Jcrop({
            onSelect:    showCoords,
            bgColor:     'black',
            bgOpacity:   .4,
            setSelect:   [ 100, 100, 50, 50 ],
            aspectRatio: 16 / 9
        });
    });
</script>
注意

•Text 必须有引号
•其他就不要有引号
•最后一个参数后面没有逗号
上一篇：JavaScript实现图片放大效果 人气:2623
下一篇：JavaScript模拟下拉菜单 人气:2212
视频教程列表
文章教程搜索
 
Javascript推荐教程
Javascript热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058