Nearsighted Prank Master

    @shihuo/image-transform-component

    1.2.9 • 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 重置绘图

    Install

    npm i @shihuo/image-transform-component

    DownloadsWeekly Downloads

    9

    Version

    1.2.9

    License

    MIT

    Unpacked Size

    1.76 MB

    Total Files

    16

    Last publish

    Collaborators

    • yubowei
    • jiaqingxu
    • zhaozhengbo
    • shawnsong