更新记录
1.1.13(2023-10-26)
下载此版本
优化图片初始化逻辑
修护已知bug
1.1.12(2023-06-27)
下载此版本
修护vue3小程序下报错的bug
1.1.11(2023-05-29)
下载此版本
修护了在vue3下报错的bug
查看更多
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
HBuilderX 3.1.0 app-vue |
× |
2.9.0 |
× |
× |
× |
× |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
× |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
√ |
√ |
√ |
√ |
× |
× |
× |
× |
× |
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 |
点击取消按钮 |
- |
示例
<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 代替。
2.微信小程序真机调试会报错,但正常运行是不会有问题的。
3.uni-app版本不断更新,插件有时无法适应新版本,感谢大家及时提交bug,但希望大家手下留情,不要轻易给差评。