addJcrop('name值', '标题' [, '提示', '默认值', '参数', '额外属性', '额外css类'])

标识符:jcrop

参数 含义 类型
name name值 string
title 标题 string
tips 提示 string
default 默认值 string
options 参数 array
extra_class 额外css类 string

举个栗子

return ZBuilder::make('form')
    ->addJcrop('avatar', '头像')
    ->fetch();

点击“上传”选择图片,并在图片上拖动鼠标,选择适合的大小。

然后点击“裁剪”即可。

默认值

这里的默认值是指图片的id。

参数

该组件有以下常用的参数,根据实际需求设置。

参数名 默认值 说明
minSize [ 8, 8 ] 选框最小尺寸,代表宽和高
maxSize [ 0, 0 ] 选框最大尺寸, 代表宽和高
aspectRatio 0 选框宽高比,它的值为width/height,例如:1表示正方形
bgColor null] 背景颜色。颜色关键字、HEX、RGB 均可。
bgOpacity null 背景透明度,比如0.5
edge [ 'n' => 0, 's' => 0, 'e' => 0, 'w' => 0 ] 选框距四边的距离,其中s和e要写负值
canDrag true 选框是否可拖拽
canResize true 选框是否可改变大小
canSelect true 是否可以新建选框
setSelect null 设置选框大小和位置
saveWidth null 保存的图片宽度
saveHeight null 保存的图片高度

这里挑几个参数说一下

比如,希望限定选框的最小尺寸为10x10和最大尺寸50x50

return ZBuilder::make('form')
    ->addJcrop('avatar', '头像', '', '', ['minSize' => [10, 10], 'maxSize' => [50, 50]])
    ->fetch();

想设置选框距离四边的距离都为10px

return ZBuilder::make('form')
    ->addJcrop('avatar', '头像', '', '', ['edge' => ['n' => 10, 's' => -10, 'e' => -10, 'w' => 10]])
    ->fetch();

n表示距上方距离,s表示距下方距离,e表示距右方距离,w表示距左方距离,其中,下和右的值需写负值。

设置选框大小和位置

return ZBuilder::make('form')
    ->addJcrop('avatar', '头像', '', '', ['setSelect' => [10, 10, 50, 50]])
    ->fetch();

表示选区距左方和上方10px,并且设置选区大小为50x50.

设置保存图片的大小

return ZBuilder::make('form')
    ->addJcrop('avatar', '头像', '', '', ['saveWidth' => 50, 'saveHeight' => 50])
    ->fetch();

以上表示图片最终保存为50x50,如果不填写则保存的图片大小以选区为准。