jcrop基本参数一览

下面我将为你详细讲解“jcrop基本参数一览”的完整攻略。

什么是jcrop

jcrop是一个开源的JavaScript图像裁剪库，它可以在客户端裁剪保存图片，也可以与服务器后端交互，实现裁剪后的保存。

jcrop基本参数

在使用jcrop时，我们可以通过设置一些基本参数来实现各种功能。下面是一些常用的基本参数：

参数名	默认值	描述
aspectRatio	0	设置裁剪框的宽高比例
allowSelect	true	是否允许选择裁剪区域
allowMove	true	是否允许移动裁剪框
allowResize	true	是否允许通过拖拽改变裁剪框的大小
minSize	[0, 0]	裁剪框的最小尺寸
maxSize	[0, 0]	裁剪框的最大尺寸
setSelect	null	设置裁剪框的初始位置和大小，例如[x, y, w, h]
onChange	null	当选择的区域发生改变时触发的回调函数
onSelect	null	当选择的区域确定后触发的回调函数

示例说明

示例1

在这个示例中，我们将使用aspectRatio参数来设置裁剪框的宽高比例为4:3：

$(function(){
    $('#crop').Jcrop({
        aspectRatio: 4/3
    });
});

在这个示例中，裁剪框的宽和高的比例将被锁定为4:3，用户只能选择符合这个比例的区域进行裁剪。

示例2

在这个示例中，我们将使用onSelect参数来在用户确认选择区域后输出选择的信息：

$(function(){
    $('#crop').Jcrop({
        onSelect: function(c){
            console.log('x='+c.x+', y='+c.y+', w='+c.w+', h='+c.h);
        }
    });
});

在这个示例中，当用户确认选择区域后，会触发onSelect回调函数，输出选择的信息。其中c参数是一个对象，包含了选择区域的位置和大小信息。