在线裁剪图片jquery插件Jcrop - 中文文档

最新推荐文章于 2017-10-28 15:52:00 发布

原创最新推荐文章于 2017-10-28 15:52:00 发布 · 249 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #php #ViewUI

WEB前端专栏收录该内容

21 篇文章

订阅专栏

效果请看：http://deepliquid.com/projects/Jcrop/demos.php

入门
• 下载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
     //w宽度 h高度  x y 左上角 x2 y2右下角坐标
  };



</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 必须有引号
•其他就不要有引号
•最后一个参数后面没有逗号