73 lines
1.9 KiB
Markdown
73 lines
1.9 KiB
Markdown
# ksp-cropper
|
||
|
||
## 高性能图片裁剪工具
|
||
|
||
### 属性说明
|
||
|属性 |类型 |默认 |备注 |
|
||
| :--------: | :-----: | :----: | :----: |
|
||
| url |String | "" | 需要裁剪的图片路径，为空时控件隐藏，不为空时控件显示|
|
||
| mode |String | "free" | 裁剪模式|
|
||
| width |Number | 200 | 图片裁剪后的宽度，固定大小时有效|
|
||
| height |Number | 200 | 图片裁剪后的高度，固定大小时有效|
|
||
| maxWidth |Number | 1024 | 图片裁剪后的最大宽度 |
|
||
| maxHeight |Number | 1024 | 图片裁剪后的最大高度 |
|
||
|
||
### mode有效值
|
||
|
||
| 模式 |值 |说明 |
|
||
| :-----: | :-----: | :----: |
|
||
| 固定模式 |fixed | 裁剪出指定大小的图片，一般用于头像上传 |
|
||
| 等比缩放 |ratio | 限定宽高比，裁剪大小不固定 |
|
||
| 自由模式 |free | 不限定宽高比，裁剪大小不固定 |
|
||
|
||
### 事件说明
|
||
|事件名称 |说明 |返回 |
|
||
| :--------: | :-----: | :----: |
|
||
| ok |点击确定按钮 | e:{path} |
|
||
| cancel |点击取消按钮 | - |
|
||
|
||
|
||
### 示例
|
||
|
||
```html
|
||
|
||
<template>
|
||
<view>
|
||
<button @click="select">选择图片</button>
|
||
<image mode="widthFix" :src="path"/>
|
||
<ksp-cropper mode="free" :width="200" :height="140" :maxWidth="1024" :maxHeight="1024" :url="url" @cancel="oncancel" @ok="onok"></ksp-cropper>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
url: "",
|
||
path: ""
|
||
}
|
||
},
|
||
onLoad() {
|
||
},
|
||
methods: {
|
||
select() {
|
||
uni.chooseImage({
|
||
count: 1,
|
||
success: (rst) => {
|
||
// 设置url的值，显示控件
|
||
this.url = rst.tempFilePaths[0];
|
||
}
|
||
});
|
||
},
|
||
onok(ev) {
|
||
this.url = "";
|
||
this.path = ev.path;
|
||
},
|
||
oncancel() {
|
||
// url设置为空，隐藏控件
|
||
this.url = "";
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
``` |