npm package: @shihuo/image-free-crop-component
Description: 图片裁剪组件
Latest version: 1.4.3

# 图片自由裁剪

@shihuo/image-free-crop-component

图片裁剪组件

```bash
# 安装依赖
npm i -s @shihuo/image-free-crop-component

# 更新依赖
npm update @shihuo/image-free-crop-component
```

## API

| 参数名          | 说明                   | 必填 | 类型          | 默认值           | 备注                                                         |
| --------------- | ---------------------- | ---- | ------------- | ---------------- | ------------------------------------------------------------ |
| preventMessage  | 是否阻止弹出内置信息框 |      | boolean       | false            |                                                              |
| setSelect       | 裁剪框配置             |      | Array         | [0, 0, 400, 400] | [x, y, witdh, height]<br />x：裁剪框起始 x 轴<br />y：裁剪框起始 y 轴<br />width：裁剪框渲染起始宽度<br />height：裁剪框渲染起始高度 |
| boxWidth        | 容器宽度               |      | number        | 600              |                                                              |
| boxHeight       | 容器最小高度           |      | number        | 600              |                                                              |
| bgColor         | 裁剪框背景色           |      | string        | \#2c7152         | 十六进制色值                                                 |
| ratio           | 裁剪框固定宽高比例     |      | stirng/number | 0                | 0 表示不限制宽高比例<br />number: 表示宽/高比例值<br />string: 支持"1:1" "3:4"等格式 |
| src             | 待裁切的图片链接       | 必填 | string        |                  |                                                              |
| onCropChange    | 裁切结果改变时回调     |      | function      |                  | 入参：<br />coordinate：<br />coordinate.x：x 坐标<br />coordinate. y：y 坐标<br />coordinate.w：裁剪宽度<br />coordinate.h：裁剪高度 |
| uploader        | 上传控件               |      | Uploader      | null             | v1.3.0+支持<br />fusion 或@shihuo/upload-component 库<br />通过 new Uploader()得到的上传核心<br />对象，裁剪后直接上传图片 |
| uploadAfterCrop | 裁剪后上传             |      | boolean       | false            | v1.3.6+支持<br />上传控件默认使用@shihuo/upload-component<br />可自定义传入上传控件，参见uploader |
| beforeCrop      | 裁剪触发前触发         |      | function      |                  |                                                              |
| onSuccess       | 裁剪成功后触发         |      | function      |                  | 返参：<br />image: <string>裁剪后的图片 base64<br />coordinate： 同 getCoordinate 返回 |
| onError         | 裁剪失败触发           |      | function      |                  |                                                              |
| onComplate      | 裁剪成功或失败都会触发 |      | function      |                  |                                                              |
| bgOpacity       | 裁剪背景透明度         |      | number        | 0.5              | v1.4.0新增                                                   |
| minSize         | 裁剪最小范围           |      | array         | [0, 0]           | v1.4.0新增                                                   |
| maxSize         | 裁剪最大范围           |      | array         | [0,0]            | v1.4.0新增                                                   |
| ref.API         | 方法集                 |      |               |                  |                                                              |

## Dialog 模式

支持所有用法，特殊用法和说明你请看下方 API 和实际使用用例

集成@alifd/next 库的 Dialog、 Button、Message 组件

| 参数名   | 说明                         | 必填 | 类型     | 默认值 | 备注                                                                                                                     |
| -------- | ---------------------------- | ---- | -------- | ------ | ------------------------------------------------------------------------------------------------------------------------ |
| onUse    | 应用按钮点击回调             |      | function |        | 入参：<br />src：裁剪后的图像 URL<br />coordinates：<br /> x：x 坐标<br /> y：y 坐标<br /> w：裁剪宽度<br /> h：裁剪高度 |
| onReset  | 重置按钮点击回调             |      | function |        |                                                                                                                          |
| onCancel | 取消按钮或右上角关闭点击回调 |      | function |        |                                                                                                                          |
| uploader | 用法同上                     |      | Uploader |        | v1.3.0+支持<br />传入 uploader 后，onUse 回调失效，成功或失败<br />逻辑请在 uploader 控件配置中书写                      |

#### ref.API 方法集

| 参数名             | 说明                 | 必填 | 类型     | 默认值 | 备注                                                         |
| ------------------ | -------------------- | ---- | -------- | ------ | ------------------------------------------------------------ |
| release            | 取消框选             |      | function |        |                                                              |
| disable            | 禁用框选             |      | function |        |                                                              |
| enable             | 启用框选             |      | function |        |                                                              |
| destroy            | 销毁框选             |      | function |        |                                                              |
| getBounds          | 获取真实尺寸         |      | function |        | 返回：[w, h]                                                 |
| getWidgeSize       | 获取渲染尺寸         |      | function |        | 返回：[w, h]                                                 |
| getScaleFactor     | 获取宽高比例         |      | function |        | 返回：[w, h]                                                 |
| getCoordinate      | 获取当前裁剪信息     |      | Function |        | coordinates：<br /> x：x 坐标<br /> y：y 坐标<br /> w：裁剪宽度<br /> h：裁剪高度 |
| reset              | 重置裁剪信息         |      | function |        |                                                              |
| setImage           | 设置待裁剪图片       |      | function |        | 入参：<br />string: 图片链接                                 |
| getImage           | 获取当前裁剪图片     |      | function |        | 返回：src                                                    |
| getCropStatus      | 当前裁剪框状态       |      | enum     |        | crop:：裁剪中<br />preview：预览中                           |
| setCropStatus      | 设置裁剪框状态       |      | function |        | 入参同 getCropStatus 返回值                                  |
| reset              | 重置裁剪框到初始状态 |      | function |        |                                                              |
| triggerCrop        | 触发裁剪接口         |      | function |        | 入参：<br />uploadAfterCrop：控制在传入 uploader 时<br />是否触发上传，默认 true<br /> |
| triggerReverseCrop | 触发反向裁剪接口     |      | function |        | 同triggerCrop<br /><br />v1.4.0新增                          |