更新记录
1.0.0(2023-09-19) 下载此版本
首次发布
平台兼容性
Vue2 | Vue3 |
---|---|
√ | √ |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
HBuilderX 3.8.4 app-vue app-nvue | √ | √ | √ | √ | √ | √ |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
√ | √ | √ | √ |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | √ | √ | √ | √ |
hy-imgeditor
这是一个头像裁剪工具,目前只有正方形,可快速对图片进行等比例宽高裁剪
使用说明
1.将插件导入HbuilderX,在pages.json中注册页面
"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app"
}
}
,{
"path" : "uni_modules/hy-imgeditor/pages/edit/edit",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false,
"navigationStyle": "custom"
}
}
],
2.在需要进行裁剪图片的页面设置如下代码
<template>
<view>
<button @click="to">选择图片</button>
<image mode="aspectFit" :src="img"></image>
</view>
</template>
<script>
export default {
data() {
return {
tempimg: '',
img:'',
}
},
onShow() {
let that=this;
//接收裁剪好的图片参数‘updateimg’
uni.$on('updateimg',function(data){
that.img=data
// console.log(data);
})
},
methods: {
to(){
uni.chooseImage({
//选择图片进入裁剪页进行修改,将图片临时地址传给参数‘img’
success: (res) => {
this.tempimg=res.tempFilePaths[0]
uni.navigateTo({
url:'/uni_modules/hy-imgeditor/pages/edit/edit?img='+this.tempimg
})
}
})
},
}
}
</script>
<style>
.content {
height: 100%;
width: 100%;
}
</style>
3.设置完毕即可使用了
参数说明
1.‘img’:需要进行裁剪的图片临时地址 2.‘updateimg’:裁剪完毕的图片参数