ThinkChat🤖让你学习和工作更高效,注册即送10W Token,即刻开启你的AI之旅 广告
## addJcrop('name值', '标题' [, '提示', '默认值', '参数', '额外属性', '额外css类', '缩略图参数', '水印参数']) | 版本 | 新增功能 | | --- | --- | | 1.2.0 | 自定义生成缩略图,自定义水印 | 标识符:`jcrop` | 参数 | 含义 | 类型 | | --- | --- | --- | | name | name值 | string | | title | 标题 | string | | tips | 提示 | string | | default | 默认值 | string | | options | 参数 | array | | extra_class | 额外css类 | string | ### 举个栗子 ~~~ return ZBuilder::make('form') ->addJcrop('avatar', '头像') ->fetch(); ~~~ ![](https://box.kancloud.cn/940a5c02810630dcb6954876b56406cc_189x80.png) 点击“上传”选择图片,并在图片上拖动鼠标,选择适合的大小。 ![](https://box.kancloud.cn/cff0b35957c926458b8387b5f63a3d16_989x410.png) 然后点击“裁剪”即可。 ### 默认值 这里的默认值是指图片的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(); ~~~ >[info] 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,如果不填写则保存的图片大小以选区为准。 ### 自定义生成缩略图 >[info] 此参数需要1.2.0或以上版本支持。 **生成30x30的缩略图** 如果需要生成30x30的缩略图,那么size参数要写成30,30(用逗号隔开) ~~~ return ZBuilder::make('form') ->addJcrop('avatar', '头像', '', '', [], '', ['size' => '30,30']) ->fetch(); ~~~ 或者 ~~~ return ZBuilder::make('form') ->addFormItems([ ['jcrop', 'avatar', '头像', '', '', [], '', ['size' => '30,30']] ]) ->fetch(); ~~~ **设置缩略图裁剪类型** 默认情况下,缩略图的裁剪方式是“等比例缩放”,如果需要设置其他类型,可以这样写 ~~~ return ZBuilder::make('form') ->addJcrop('avatar', '头像', '', '', [], '', ['size' => '30,30', 'type' => 2]) ->fetch(); ~~~ type参数可以设置以下几种,默认为1,即等比例缩放。 | 参数 | 含义 | | --- | --- | | 1 | 等比例缩放 | | 2 | 缩放后填充 | | 3 | 居中裁剪 | | 4 | 左上角裁剪 | | 5 | 右下角裁剪 | | 6 | 固定尺寸缩放 | **关闭缩略图功能** >[danger]默认情况下,如果没有设置缩略图参数,那么是否生成缩略图由【系统】【系统设置】【上传】中的配置决定。 ![](https://box.kancloud.cn/f60080bf66cebcb4738f363ac6e404d3_672x388.png) 如果在表单项参数中设置了缩略图参数,则以表单项的缩略图参数为优先。 如果在系统设置中设置了缩略图参数,但在某些情况下,想临时不生成缩略图,则可以将缩略图参数设置为字符串'`close`'。 ~~~ return ZBuilder::make('form') ->addJcrop('avatar', '头像', '', '', [], '', 'close') ->fetch(); ~~~ ### 自定义水印 >[info] 此参数需要1.2.0或以上版本支持。 设置参数的img为附件id,即水印图片的附件id,如果附件不存在,则不会添加水印。 ~~~ return ZBuilder::make('form') ->addJcrop('avatar', '头像', '', '', [], '', '', ['img' => 10]) ->fetch(); ~~~ **设置水印的位置** ~~~ return ZBuilder::make('form') ->addJcrop('avatar', '头像', '', '', [], '', '', ['img' => 10, 'pos' => 1]) ->fetch(); ~~~ 水印位置有以下几个参数,默认为9,即右下角。 | 参数 | 含义 | | --- | --- | | 1 | 左上角 | | 2 | 上居中 | | 3 | 右上角 | | 4 | 左居中 | | 5 | 居中 | | 6 | 右居中 | | 7 | 左下角 | | 8 | 下居中 | | 9 | 右下角 | 设置水印透明度 ~~~ return ZBuilder::make('form') ->addJcrop('avatar', '头像', '', '', [], '', '', ['img' => 10, 'pos' => 1, 'alpha' => 90]) ->fetch(); ~~~ 透明度取值范围是0~100,数字越小,透明度越高。 不添加水印 >[danger]默认情况下,如果没有设置水印参数,那么是否添加水印由【系统】【系统设置】【上传】中的配置决定。 ![](https://box.kancloud.cn/bdff2257c7e478a069439c77b1a2b8b3_660x506.png) 如果在表单项参数中设置了水印图参数,则以表单项的水印参数为优先。 如果在系统设置中设置了打开了水印功能,但在某些情况下,想临时不添加水印,则可以将水印参数设置为字符串'`close`'。 ~~~ return ZBuilder::make('form') ->addJcrop('avatar', '头像', '', '', [], '', '', 'close') ->fetch(); ~~~