接口文档SDK业务专题开发者工具

图片裁剪 Tools

图片裁剪工具组件,支持对图片进行前端缩放和区域选择,输出裁剪参数,包括裁剪出的图片在原图的位置、图片缩放比例等。注:本组件不会进行实际图片裁剪,仅输出裁剪参数供后台接口进行裁剪操作。

使用说明

import { Tools } from '@tencent/mktui';
const { ImageClipper } = Tools;
<ImageClipper {...this.props} />

组件示例

*为必填项

属性说明

名称描述类型默认值
src*
图片srcstring''
clipWidth*
裁剪出的图片宽number100
clipHeight*
裁剪出的图片高number100
notScale
不允许图片缩放boolfalse
minScale
允许图片缩小的比例number0
maxScale
允许图片放大的比例number1
onClose
点击“取消”按钮的回调funcfunction(){}
onSubmit
点击“确定”按钮的回调funcfunction(){}

案例

// event: 点击事件
onClose(event)

// event: 点击事件, data: 图片裁剪数据 onSubmit(event, data)