@shihuo/image-transform-component

1.2.11 • Public • Published

图像变换组件

@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: 变换后的图像 base64
file: 变换后的图像文件对象
onMirror 镜像按钮回调函数 function 参数:
image: 变换后的图像 base64
file: 变换后的图像文件对象
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 重置绘图

Dependencies (1)

Dev Dependencies (7)

Package Sidebar

Install

npm i @shihuo/image-transform-component

Weekly Downloads

5

Version

1.2.11

License

MIT

Unpacked Size

1.77 MB

Total Files

16

Last publish

Collaborators

  • yubowei
  • jiaqingxu
  • zhaozhengbo
  • shawnsong