JQuery中Jcrop图片裁剪插件的用法__Jcrop_选中区_height_function_width_

当前位置: 编程技术>jquery

JQuery中Jcrop图片裁剪插件的用法

来源: 互联网发布时间：2014-10-09

本文导语: 实例学习JQuery中Jcrop图片裁剪插件的用法。请“运行代码”先试下运行，运行后请刷新一次。演示代码：代码示例: body{ margin:100px auto; ...

实例学习JQuery中Jcrop图片裁剪插件的用法。

请“运行代码”先试下运行，运行后请刷新一次。

演示代码：

代码示例:

        body{
            margin:100px auto;
            text-align:center;
        }
        .jcrop-holder {
            text-align: left;
        }
        .jcrop-vline, .jcrop-hline{
            font-size: 0;
            position: absolute;
            background: white url('/jslib/images/Jcrop.gif') top left repeat;
        }
        .jcrop-vline {
            height: 100%;
            width: 1px !important;
        }
        .jcrop-hline {
            width: 100%;
            height: 1px !important;
        }
        .jcrop-handle {
            font-size: 1px;
            width: 7px !important;
            height: 7px !important;
            border: 1px #eee solid;
            background-color: #333;
            *width: 9px;
            *height: 9px;
        }

        .jcrop-tracker {
            width: 100%;
            height: 100%;
        }

        .custom .jcrop-vline,.custom .jcrop-hline{
            background: yellow;
        }
        .custom .jcrop-handle{
            border-color: black;
            background-color: #C7BB00;
            -moz-border-radius: 3px;
            -webkit-border-radius: 3px;
        }


        jQuery(function(){
            jQuery('#cropbox').Jcrop();
        });

脚本学堂

项目中要用到用户头像功能，最好是做成用户上传一个图片后可以用图像裁剪的方法自己选择头像。
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代码部分：

代码示例:

js部分：

代码示例:

$( 

function() 

{ 

$("#demoImage").Jcrop(); 

} 

);

这样就可以在图片上进行裁剪了。
2.得到选中区域的坐标以及回调函数
html代码部分：

代码示例:

x1
y1
x2
y2
width
height

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