#uni |
您所在的位置：网站首页 › png类型头像框 › #uni |
#uni
|
思路：
第一步：首先需要在项目里安装uView框架 》》》点击跳转uview安装教程https://blog.csdn.net/ZHENGCHUNJUN/article/details/119913012?spm=1001.2014.3001.5501 第二步：在page.josn里面，引入u-avatar-cropper的路径 { "path": "uview-ui/components/u-avatar-cropper/u-avatar-cropper", "style": { "navigationBarTitleText": "头像裁剪", "navigationBarBackgroundColor": "#000000" } }第三步：排版 里面会用到唤起菜单的插件u-action-sheet （注意要放在版块外面，以免排版错乱） 》》》点击跳转到actionSheet参数 头像第四步：设置点击事件，唤起操作菜单 //触发点击事件以后，操作菜单为激活状态 头像 export default { data() { return { imgsrc: '/static/1.jpg', show: false, //操作菜单为隐藏状态 headlist: [{ //操作菜单的参数设置 text: '选择图片', color: '#666666', fontSize: 35 }, ], } }, } }第五步：在操作菜单这个组件里，设置点击事件，进行裁剪 methods: { toCut() { //触发点击事件以后，跳转到裁剪头像的页面 this.$u.route({ url: '/uview-ui/components/u-avatar-cropper/u-avatar-cropper', // 内部已设置以下默认参数值，可不传这些参数 params: { // 输出图片宽度，高等于宽，单位px destWidth: 300, // 裁剪框宽度，高等于宽，单位px rectWidth: 300, // 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可 fileType: 'jpg', } }) } }第六步：进行监听图片裁剪结果，以及传递到服务器 created() { // 监听从裁剪页发布的事件，获得裁剪结果 uni.$on('uAvatarCropper', path => { this.imgsrc = path; // 可以在此上传到服务端 uni.uploadFile({ url: '', //后期自己接后端接口 filePath: path, name: 'file', complete: (res) => { console.log(res); } }); }) },源码展示： 头像 export default { data() { return { imgsrc: '/static/1.jpg', show: false, headlist: [{ text: '选择图片', color: '#666666', fontSize: 35 }, ], } }, created() { // 监听从裁剪页发布的事件，获得裁剪结果 uni.$on('uAvatarCropper', path => { this.imgsrc = path; // 可以在此上传到服务端 uni.uploadFile({ url: '', filePath: path, name: 'file', complete: (res) => { console.log(res); } }); }) }, methods: { toCut() { this.$u.route({ url: '/uview-ui/components/u-avatar-cropper/u-avatar-cropper', // 内部已设置以下默认参数值，可不传这些参数 params: { // 输出图片宽度，高等于宽，单位px destWidth: 300, // 裁剪框宽度，高等于宽，单位px rectWidth: 300, // 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可 fileType: 'jpg', } }) } } } .personal { display: flex; align-items: center; justify-content: space-between; width: 90%; margin: 50upx auto 35upx; .title { font-size: 30upx; color: #333333; } .name { display: flex; align-items: center; .item { height: 52upx; font-size: 22upx; color: #666666; display: flex; align-items: center; image { width: 70upx; height: 70upx; border-radius: 50%; } } .right-icon { padding-left: 15upx; } } }效果展示：
|
https://blog.csdn.net/ZHENGCHUNJUN/article/details/119913012?spm=1001.2014.3001.5501
【本文地址】
今日新闻 |
推荐新闻 |