图片自由裁剪

@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: 裁剪后的图片 base64coordinate： 同 getCoordinate 返回 | | onError | 裁剪失败触发 | | function | | | | onComplate | 裁剪成功或失败都会触发 | | function | | | | bgOpacity | 裁剪背景透明度 | | number | 0.5 | v1.4.0新增 | | minSize | 裁剪最小范围 | | array | [0, 0] | v1.4.0新增 | | maxSize | 裁剪最大范围 | | array | [0,0] | v1.4.0新增 | | ref.API | 方法集 | | | | |

Dialog 模式

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

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

| 参数名 | 说明 | 必填 | 类型 | 默认值 | 备注 | | -------- | ---------------------------- | ---- | -------- | ------ | ------------------------------------------------------------------------------------------------------------------------ | | onUse | 应用按钮点击回调 | | function | | 入参：src：裁剪后的图像 URLcoordinates： 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 | | triggerReverseCrop | 触发反向裁剪接口 | | function | | 同triggerCropv1.4.0新增 |