jQuery 图像裁剪插件Jcrop

 

Jcrop简介

Jcrop 是一个功能强大的 jQuery 图像裁剪插件,结合后端程序(例如:PHP)可以快速的实现图片裁剪的功能。

Jcrop是一款免费的软件,采用MIT License发布。

注:本文主要围绕 Jcrop v2.0.0-RC1 版本进行介绍,一些参数或API在 Jcrop v0.9.12 及之前版本中可能并不支持。

 

版本

Jcrop v0.9.12 支持画一个框截取图片。

Jcrop v2.0.0-RC1相比于老版本,新增了支持画多框的功能。

 

下载地址:

http://jcrop.org/download

下载对应版本的压缩包。

压缩包中有demo目录,其中有多种应用场景的范例,可以参考。

 

使用方法

载入CSS文件

< link  rel ="stylesheet"  href ="Jcrop.css" >

载入Javascript文件

< script  src ="jquery.js" ></ script > 
< script  src ="Jcrop.js" ></ script >

给IMG标签加上ID

< img  id ="element_id"  src ="pic.jpg" >

调用Jcrop

$('#element_id').Jcrop();

 

参数说明

下表为Jcrop对象的主要参数:

属性类别名称默认值说明
选中框属性edge{ n: 0, s: 0, e: 0, w: 0 }设置框的四条边界线的粗细
例:
cb.setOptions({ edge: {n: 15, e: -20, s: -40, w: 28}});
setSelectnull设置一个框,参数应该分别为这个框的左上角x坐标,左上角y坐标,宽度,高度
例:
cb.setSelect([ 147, 55, 456, 390 ]);
linkedTRUE是否连接
linkedCurrentTRUE是否连接当前选中框
canDeleteTRUE允许删除框
canSelectTRUE允许选中框
canDragTRUE允许拖拽框
canResizeTRUE允许放大缩小框
子组件eventManagerComponentJcrop.component.EventManager事件管理组件
keyboardComponentJcrop.component.Keyboard键盘事件响应组件
dragstateComponentJcrop.component.DragState拖拽状态组件
stagemanagerComponentJcrop.component.StageManagerstage管理组件
animatorComponentJcrop.component.Animator动画处理组件
selectionComponentJcrop.component.Selection选中框管理组件
stageConstructorJcrop.stageConstructorstage对象构造器
stage属性allowSelectTRUE允许选新框
multiFALSE允许画多个框
multiMaxFALSE最大框数
multiCleanupTRUE允许清除所有框
animationTRUE允许动画效果
animEasingswing'动画效果类型
animDuration400动画持续时间
fadingTRUE允许淡入淡出效果
fadeDuration300淡入淡出持续时间
fadeEasingswing'淡入淡出类型
bgColorblack'背景颜色
bgOpacity0.5背景透明度
启动选项applyFilters[ 'constrain', 'extent', 'backoff', 'ratio', 'shader', 'round' ]应用过滤器
borders [ 'e', 'w', 's', 'n' ]边框
handles [ 'n', 's', 'e', 'w', 'sw', 'ne', 'nw', 'se' ]句柄
dragbars[ 'n', 'e', 'w', 's' ]拖拽栏
dragEventTargetwindow拖拽事件目标
xscale1x方向比例
yscale1y方向比例
boxWidthnullbox宽度
boxHeightnullbox高度

 

API

 

下表为Jcrop对象的主要API:

 

 

名称说明
init初始化Jcrop对象
destroy销毁Jcrop对象
applySizeConstraints应用大小限制条件
initComponent初始化指定子组件
setOptions设置选项参数
例:
cb.setOptions({ allowSelect: true, multi: false });
applyFilters应用过滤器
getDefaultFilters获取默认过滤器
setSelection设置选中框
getSelection获取选中框
newSelection创建一个新的选中框
hasSelection判断是否有选中框
removeSelection移除选中框
addFilter添加过滤器
removeFilter移除过滤器
blur不聚焦选中框
focus聚焦选中框
initEvents初始化事件
maxSelect设置选中框的最大宽度和高度
refresh刷新所有框
blurAll所有框都取消聚焦
scale框按照比例调整
unscalescale的反向操作
deleteSelection删除选中框,并聚焦在最早创建的框上
animateTo以动画的形式生成一个新的框
setSelect设置框
getContainerSize获取容器的尺寸
resizeContainer调整容器的宽度和高度
setImage设置Jcrop绑定的图像,可以用这个函数更换图片
update更新框

 

 

范例代码解读

这部分内容是对于Jcrop2中的demo核心代码进行注释讲解。详细内容请参考对于demo的注释内容

注:以下所示的代码都是在 Jcrop v2.0.0-RC1 版本的demo代码基础上提炼了核心代码。替换原目录下的代码就可以直接运行。

 

basic.html

这个demo演示了最基本的功能。可以在图片上拖拽、拉伸框并实时显示坐标。

 

box-sizing.html 代码与 basic.html 基本相同,只是增加了设置框的大小,所以合并在一处讲解。

 

<! DOCTYPE html >
< html  lang ="en" >
   < head >
     < script  src ="../js/jquery.min.js" ></ script >
     < script  src ="../js/Jcrop.js" ></ script >
     < script  type ="text/javascript" >
      jQuery(
function ($){
        
var  d  =  document, ge  =   ' getElementById ' ;
        
        
//  cropmove事件是指拖动、拖拽框的动作
         //  本函数的作用是每次对于框的变化,都记录其坐标变化,并记录下来
        $( ' #interface ' ).on( ' cropmove ' , function (e,s,c){
          d[ge](
' crop-x ' ).value  =  c.x;
          d[ge](
' crop-y ' ).value  =  c.y;
          d[ge](
' crop-w ' ).value  =  c.w;
          d[ge](
' crop-h ' ).value  =  c.h;
        });
        
        
//  cropend事件是指拖动、拖拽框的动作结束
         //  当拖拽或拉伸框的动作结束,松开鼠标时,弹出提示框显示最终坐标
        $( ' #interface ' ).on( ' cropend ' , function (e,s,c){
          d[ge](
' crop-x ' ).value  =  c.x;
          d[ge](
' crop-y ' ).value  =  c.y;
          d[ge](
' crop-w ' ).value  =  c.w;
          d[ge](
' crop-h ' ).value  =  c.h;
          alert(
" x :  "   +  parseInt(c.x)  +   " , y :  "   +  parseInt(c.y)  +   " , w :  "   +  parseInt(c.w)  +   " , h :  "   +  parseInt(c.h));
        });
        
        
//  Most basic attachment example
        $( ' #target ' ).Jcrop({
          boxWidth: 
750 ,     //  设置框的最大宽度
          setSelect: [  175 100 400 300  ]
        });
        
        $(
' #text-inputs ' ).on( ' change ' , ' input ' , function (e){
          $(
' #target ' ).Jcrop( ' api ' ).animateTo([
            parseInt(d[ge](
' crop-x ' ).value),
            parseInt(d[ge](
' crop-y ' ).value),
            parseInt(d[ge](
' crop-w ' ).value),
            parseInt(d[ge](
' crop-h ' ).value)
          ]);
        });
        
      });
      
    
</ script >
     < link  rel ="stylesheet"  href ="demo_files/main.css" >
     < link  rel ="stylesheet"  href ="demo_files/demos.css" >
     < link  rel ="stylesheet"  href ="../css/Jcrop.css" >
     < style >
      #text-inputs 
{  margin :  10px 8px 0 ;   }
      .input-group 
{  margin-right :  1.5em ;   }
      .nav-box 
{  width :  750px ;  padding :  0 !important ;  margin :  4px 0 ;  background-color :  #f8f8f7 ;   }
      
    
</ style >
   </ head >
   < body >
     < div  class ="container" >
       < div  class ="row" >
         < div  class ="span12" >
           < div  class ="jc-demo-box" >
             < div  id ="interface"  class ="page-interface" >< img  src ="http://jcrop-cdn.tapmodo.com/assets/images/sierra2-750.jpg"  id ="target" ></ div >
             < div  class ="nav-box" >
               < form  onsubmit ="return false;"  id ="text-inputs" >< span  class ="input-group" >< b >X </ b >
                   < input  type ="text"  name ="cx"  id ="crop-x"  class ="span1" ></ span >< span  class ="input-group" >< b >Y </ b >
                   < input  type ="text"  name ="cy"  id ="crop-y"  class ="span1" ></ span >< span  class ="input-group" >< b >W </ b >
                   < input  type ="text"  name ="cw"  id ="crop-w"  class ="span1" ></ span >< span  class ="input-group" >< b >H </ b >
                   < input  type ="text"  name ="ch"  id ="crop-h"  class ="span1" ></ span >
               </ form >
             </ div >
             < div  class ="clearfix" ></ div >
           </ div >
         </ div >
       </ div >
     </ div >
   </ body >
</ html >
View Code

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值