Nutritious Pumpkin Meal

    @shihuo/image-free-crop-component

    1.3.13 • Public • Published

    图片自由裁剪

    @shihuo/image-free-crop-component

    图片裁剪组件

    # 安装依赖
    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]
    x:裁剪框起始 x 轴
    y:裁剪框起始 y 轴
    width:裁剪框渲染起始宽度
    height:裁剪框渲染起始高度
    boxWidth 容器宽度 number 600
    boxHeight 容器最小高度 number 600
    bgColor 裁剪框背景色 string #2c7152 十六进制色值
    ratio 裁剪框固定宽高比例 stirng/number 0 0 表示不限制宽高比例
    number: 表示宽/高比例值
    string: 支持"1:1" "3:4"等格式
    src 待裁切的图片链接 必填 string
    onCropChange 裁切结果改变时回调 function 入参:
    coordinate:
    coordinate.x:x 坐标
    coordinate. y:y 坐标
    coordinate.w:裁剪宽度
    coordinate.h:裁剪高度
    uploader 上传控件 Uploader null v1.3.0+支持
    fusion 或@shihuo/upload-component 库
    通过 new Uploader()得到的上传核心
    对象,裁剪后直接上传图片
    uploadAfterCrop 裁剪后上传 boolean false v1.3.6+支持
    上传控件默认使用@shihuo/upload-component
    可自定义传入上传控件,参见uploader
    beforeCrop 裁剪触发前触发 function
    onSuccess 裁剪成功后触发 function 返参:
    image: 裁剪后的图片 base64
    coordinate: 同 getCoordinate 返回
    onError 裁剪失败触发 function
    onComplate 裁剪成功或失败都会触发 function
    ref.API 方法集

    Dialog 模式

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

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

    参数名 说明 必填 类型 默认值 备注
    onUse 应用按钮点击回调 function 入参:
    src:裁剪后的图像 URL
    coordinates:
    x:x 坐标
    y:y 坐标
    w:裁剪宽度
    h:裁剪高度
    onReset 重置按钮点击回调 function
    onCancel 取消按钮或右上角关闭点击回调 function
    uploader 用法同上 Uploader v1.3.0+支持
    传入 uploader 后,onUse 回调失效,成功或失败
    逻辑请在 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:
    x:x 坐标
    y:y 坐标
    w:裁剪宽度
    h:裁剪高度
    reset 重置裁剪信息 function
    setImage 设置待裁剪图片 function 入参:
    string: 图片链接
    getImage 获取当前裁剪图片 function 返回:src
    getCropStatus 当前裁剪框状态 enum crop::裁剪中
    preview:预览中
    setCropStatus 设置裁剪框状态 function 入参同 getCropStatus 返回值
    reset 重置裁剪框到初始状态 function
    triggerCrop 触发裁剪接口 function 入参:
    uploadAfterCrop:控制在传入 uploader 时
    是否触发上传,默认 true

    Install

    npm i @shihuo/image-free-crop-component

    DownloadsWeekly Downloads

    15

    Version

    1.3.13

    License

    MIT

    Unpacked Size

    1.06 MB

    Total Files

    23

    Last publish

    Collaborators

    • yubowei
    • jiaqingxu
    • zhaozhengbo
    • shawnsong