## 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(); ~~~  點擊“上傳”選擇圖片，并在圖片上拖動鼠標，選擇適合的大小。  然后點擊“裁剪”即可。 ### 默認值 這里的默認值是指圖片的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]默認情況下，如果沒有設置縮略圖參數，那么是否生成縮略圖由【系統】【系統設置】【上傳】中的配置決定。  如果在表單項參數中設置了縮略圖參數，則以表單項的縮略圖參數為優先。 如果在系統設置中設置了縮略圖參數，但在某些情況下，想臨時不生成縮略圖，則可以將縮略圖參數設置為字符串'`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]默認情況下，如果沒有設置水印參數，那么是否添加水印由【系統】【系統設置】【上傳】中的配置決定。  如果在表單項參數中設置了水印圖參數，則以表單項的水印參數為優先。 如果在系統設置中設置了打開了水印功能，但在某些情況下，想臨時不添加水印，則可以將水印參數設置為字符串'`close`'。 ~~~ return ZBuilder::make('form') ->addJcrop('avatar', '頭像', '', '', [], '', '', 'close') ->fetch(); ~~~