jQuery的图像裁剪插件Jcrop

1.最基本使用方法
html代码部分：

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]);       //设置选中区域

来源：https://www.cnblogs.com/rongfengliang/p/4680346.html

标签

jcrop

jquery事件

jquery

label