@shihuo/image-transform-component
v1.2.11
Published
图片转换组件
Downloads
14
Readme
图像变换组件
@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 | | 参数:image: 变换后的图像 base64file: 变换后的图像文件对象 | | onMirror | 镜像按钮回调函数 | | function | | 参数:image: 变换后的图像 base64file: 变换后的图像文件对象 | | onCancel | 弹窗关闭回调 | | function | | | | onChangeRange | 伸缩回调 | | function | | 参数:value: 当前伸缩尺寸 | | instance | 方法集 | | | | | | exportMinWidth | 导出图片的最小宽高(当前图片小于配置时,导出最小宽高配置)| | number | 0 |v1.2.4支持|
instance 方法集
| 参数名 | 说明 | 必填 | 类型 | 默认值 | 备注 | | ----------- | ---------------- | ---- | -------- | ------ | ------------------------------------------------------------------------------ | | zoom | 受控的伸缩比例 | | function | | 大于 0 的数字0 ~ 1 表示图像按比例缩小>1 表示图像按比例放大 | | mirror | 手动触发镜像 | | function | | | | enableDrag | 开启拖拽模式 | | function | | | | disableDrag | 关闭拖拽模式 | | function | | | | move | 相对坐标移动 | | function | | 入参:x: 相对当前绘画坐标的 x 轴移动y: 相对当前绘画坐标的 y 轴移动 | | export | 导出图片 base64 | | | | | | exportFile | 导出图片文件对象 | | | | | | reset | 重置绘图 | | | | |