You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
78 lines
2.2 KiB
78 lines
2.2 KiB
# 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>
|
|
```
|
|
|
|
### 注意
|
|
1.微信小程序从基础库 2.21.0 开始， wx.chooseImage 停止维护，请使用 uni.chooseMedia 代替。<br/>
|
|
2.微信小程序真机调试会报错，但正常运行是不会有问题的。<br/>
|
|
3.uni-app版本不断更新，插件有时无法适应新版本，感谢大家及时提交bug，但希望大家手下留情，不要轻易给差评。 |