微信小程序实现获取用户高清头像

获取用户高清头像的需求

获取用户头像的实现：

- 第一种方法很简便：是在wxml中使用``````组件直接展示用户头像，注意只是展示，并不能获取到用户的头像数据（即图片链接），而且展示的头像是132×132（单位：px）大小的，如果需求中要求更大且清晰的头像，那这种方法是行不通的。

- 第二种方法是通过js获取app.globalData中的userInfo.avatarUrl，然后再经过wxml的image组件展示出来，优点是同时获取到了用户的头像信息，缺点依旧是获取不到用户的高清头像。关键在于，用户头像的图片链接```app.globalData.userInfo.avatarUrl```是以'/132'结尾的，'/xxx'表示像素点的大小，而把'/132'改成'/0'即可获取400×400像素的高清用户头像，代码如下：

---

获取用户高清头像

效果示意图：

代码：

wxml

   

       

        获取头像

   

js

const app = getApp();

Page({

  /**

  * 页面的初始数据

  */

  data: {

    imageUrl: null,

    userInfo: {},

    hasUserInfo: false,

    canIUse: wx.canIUse('button.open-type.getUserInfo')

  },

  onLoad: function() {

    if (app.globalData.userInfo) {

      this.setData({

        userInfo: app.globalData.userInfo,

        hasUserInfo: true

      })

    } else if (this.data.canIUse) {

      // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回

      // 所以此处加入 callback 以防止这种情况

      app.userInfoReadyCallback = res => {

        this.setData({

          userInfo: res.userInfo,

          hasUserInfo: true

        })

      }

    } else {

      // 在没有 open-type=getUserInfo 版本的兼容处理

      wx.getUserInfo({

        success: res => {

          app.globalData.userInfo = res.userInfo

          this.setData({

            userInfo: res.userInfo,

            hasUserInfo: true

          })

        }

      })

    }

  },

  getUserInfo: function (e) {

    console.log(e)

    app.globalData.userInfo = e.detail.userInfo

    this.setData({

      userInfo: e.detail.userInfo,

      hasUserInfo: true

    })

  },

  getavatar: function(){

    var that=this;

    wx.downloadFile({

      url: this.data.userInfo.avatarUrl,

      success: function(res){

        console.log(res)

        that.setData({

          bgPic: headimgHD(app.globalData.userInfo.avatarUrl)

        })

      }

    })

  }

})

function headimgHD (imageUrl) {

  imageUrl = imageUrl.split('/');        //把头像的路径切成数组

  //把大小数值为 46 || 64 || 96 || 132 的转换为0

  if (imageUrl[imageUrl.length - 1] && (imageUrl[imageUrl.length - 1] == 46 || imageUrl[imageUrl.length - 1] == 64 || imageUrl[imageUrl.length - 1] == 96 || imageUrl[imageUrl.length - 1] == 132)) {

      imageUrl[imageUrl.length - 1] = 0;

  }

  imageUrl = imageUrl.join('/');  //重新拼接为字符串

  return imageUrl;

}

在Page()外建立子函数—headimgHD()来将获取到的头像进行修改后返回高清头像。此例子是通过点击按钮获取用户头像，所以在自定义函数getavatar()中调用headimgHD()；如果想实现进入该页面自动获取高清头像，则需要在onload()函数里面完成调用。

wxss

.weui-tab__content{

  width: 100%;

  height: 100%;

  text-align: center;

}

.container-body {

  padding-top: 120rpx;

}

.image {

  width: 500rpx;

  height: 500rpx;

  border: 12rpx solid white;

  border-radius: 5%;

}