图片自由裁剪
@shihuo/image-free-crop-component
图片裁剪组件
# 安装依赖
npm i -s @shihuo/image-free-crop-component
# 更新依赖
npm update @shihuo/image-free-crop-componentAPI
| 参数名 | 说明 | 必填 | 类型 | 默认值 | 备注 |
|---|---|---|---|---|---|
| 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 | |||
| 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：裁剪后的图像 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 |
||
| triggerReverseCrop | 触发反向裁剪接口 | function | 同triggerCrop v1.4.0新增 |