npm package: @shihuo/image-transform-component
Description: 图片转换组件
Latest version: 1.2.11

# 图像变换组件

@shihuo/image-transform-component

图像变换组件，支持图像伸缩、镜像、移动功能

## API

| 参数名            | 说明                      | 必填 | 类型    | 默认值  | 备注         |
| ----------------- | ------------------------- | ---- | ------- | ------- | ------------ |
| src               | 图像 url                  | 必填 | string  |         |              |
| boxWidth          | 容器宽度                  |      | number  | 600     |              |
| boxHeight         | 容器高度                  |      | number  | 600     |              |
| backgroundColor   | 图片伸缩/拖拽后的底色填充 |      | string  | #ffffff | 十六进制色值 |
| defaultEnableDrag | 默认是否允许拖拽          |      | boolean | false   |              |
| instance          | 方法集                    |      |         |         |              |

## Dialog 模式

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

集成@alifd/next 库的 Dialog、 Button、 Range,、NumberPicker 组件

| 参数名        | 说明               | 必填 | 类型     | 默认值 | 备注                                                                   |
| ------------- | ------------------ | ---- | -------- | ------ | ---------------------------------------------------------------------- |
| min           | 伸缩最小倍数       |      | number   | 0      | 在尺寸缩放够用的情况下不建议修改                                       |
| max           | 伸缩最大倍数       |      | number   | 2      | 在尺寸缩放够用的情况下不建议修改                                       |
| step          | 伸缩步长           |      | number   | 0.001  | 每次拖动缩放 0.01 倍                                                   |
| enableDrag    | 受控的是否允许拖拽 |      | boolean  | true   |                                                                        |
| onUse         | 应用按钮回调函数   |      | function |        | 参数：<br />image: 变换后的图像 base64<br />file: 变换后的图像文件对象 |
| onMirror      | 镜像按钮回调函数   |      | function |        | 参数：<br />image: 变换后的图像 base64<br />file: 变换后的图像文件对象 |
| onCancel      | 弹窗关闭回调       |      | function |        |                                                                        |
| onChangeRange | 伸缩回调           |      | function |        | 参数：<br />value: 当前伸缩尺寸                                        |
| instance      | 方法集             |      |          |        |                                                                        |
| exportMinWidth      | 导出图片的最小宽高（当前图片小于配置时，导出最小宽高配置）|      | number | 0       |v1.2.4支持|

#### instance 方法集

| 参数名      | 说明             | 必填 | 类型     | 默认值 | 备注                                                                           |
| ----------- | ---------------- | ---- | -------- | ------ | ------------------------------------------------------------------------------ |
| zoom        | 受控的伸缩比例   |      | function |        | 大于 0 的数字<br />0 ～ 1 表示图像按比例缩小<br />>1 表示图像按比例放大        |
| mirror      | 手动触发镜像     |      | function |        |                                                                                |
| enableDrag  | 开启拖拽模式     |      | function |        |                                                                                |
| disableDrag | 关闭拖拽模式     |      | function |        |                                                                                |
| move        | 相对坐标移动     |      | function |        | 入参：<br />x: 相对当前绘画坐标的 x 轴移动<br />y: 相对当前绘画坐标的 y 轴移动 |
| export      | 导出图片 base64  |      |          |        |                                                                                |
| exportFile  | 导出图片文件对象 |      |          |        |                                                                                |
| reset       | 重置绘图         |      |          |        |                                                                                |