前言

頭像是我們在這社交平臺上的一個對外的形象，讓自己的頭像更加獨特可以加深其他人對咱們的第一印象，

尤其是遇到一些特別的節日，如國慶、中秋等等，可以通過給頭像加特殊的邊框來表達一份特殊的情感！！！

接下來，將會詳細介紹如何制作個性化頭像生成微信小程式，讓大家都能夠自己實作上面的想法！！！

首先一起來看看最終實作的個性化頭像生成效果：

一、核心功能設計

該小程式想要實作的是給微信頭像或者選擇相冊中的照片加上個性化邊框，所以拆解需求后，整理的核心功能如下：

1. 授權登錄獲取頭像及昵稱
2. 選擇相冊中的圖片
3. 選擇個性化邊框
4. 合并選擇的圖片以及邊框生成個性化頭像
5. 保存頭像

二、實作步驟

首先新建一個空白的小程式專案，詳細步驟可以參考之前的系列Python+微信小程式開發文章，

?

1.建立index界面

首先新建pages/index/index檔案夾，

在pages/index/index.wxml中進行頁面設計：

<!--pages/index/index.wxml-->
<view wx:if="{{canIUse}}">
    <view class='header'>
        <view class="userinfo-avatar">
            <open-data type="userAvatarUrl"></open-data>
        </view>
    </view>
    <view class="content">
        <view>申請獲取以下權限</view>
        <text>獲得您的公開資訊（昵稱，頭像等）</text>
    </view>
    <button wx:if="{{canIUse}}" class="loginBtn" type="primary"  lang="zh_CN" bindtap="bindGetUserProfile" >
        授權登錄
    </button>
</view>

在pages/index/index.wxss中設定樣式：

/* pages/index/index.wxss */

.header {
    position: relative;
    margin: 90rpx 0rpx 90rpx 50rpx;
    width: 650rpx;
    height: 320rpx;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;     /*居中對齊彈性盒子當中的各項元素*/
    border-bottom: 1px solid #ccc;
  }
  .userinfo-avatar {
    overflow:hidden;
    display: block;
    width: 160rpx;
    height: 160rpx;
    margin: 20rpx;
    margin-top: 50rpx;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
  }
  .content {
      margin-left: 50rpx;
      margin-bottom: 90rpx;
  }
  .content text {
      display: block;
      color: #9d9d9d;
      margin-top: 40rpx;
  }
  .loginBtn {
      border-radius: 80rpx;
      margin: 100rpx 120rpx;
      font-size: 35rpx;
  }

然后在 pages/index/index.js 定義函式功能：

主要是就是通過bindGetUserProfile函式授權登錄獲取頭像以及昵稱，

bindGetUserProfile(e)     //當用戶點擊授權登錄按鈕觸發 bindGetUserInfo函式
{
  var that=this
  wx.getUserProfile({
      desc: '用于完善會員資料', // 宣告獲取用戶個人資訊后的用途，后續會展示在彈窗中，請謹慎填寫
      success: (res) => {
      console.log(res.userInfo)
      var avantarurl=res.userInfo.avatarUrl; 
      wx.navigateTo({
        url: '../../pages/avantarGenerate/avantarGenerate?url='+ avantarurl ,
      })
      },
      fail:(res)=>{
        console.log(1)
      }
    })
    
},

其中 wx.navigateTo({ })實作頁面導航，

界面效果：

?

2.建立avantarGenerate界面

首先新建pages/avantarGenerate/avantarGenerate檔案夾，

在pages/index/index.wxml中進行頁面設計：

<!--pages/avantar/avantar.wxml-->
<!-- 畫布大小按需定制 這里我按照背景圖的尺寸定的  -->
<canvas canvas-id="shareImg"></canvas>

<!-- 預覽區域  -->
<view class='preview'>
  <image class="tag" src='{{prurl}}' mode='aspectFit'></image>
  <view class="bottomAll">
    <view class="tipTxt">1,點擊喜歡的圖案生成個性化頭像</view>
    <view class="btnAll">
      <button wx:for="{{demoList}}" wx:key="key" class="btn" open-type="getUserInfo"
        plain='true' bindgetuserinfo="generateAvantar"
        data-k="{{item.key}}">
        <image src="{{item.img}}" class="demoImg" mode='widthFix'></image>
      </button>
    </view>
    <view class="tipTxt">2,點擊保存頭像到本地</view>
    <button bindtap='save' class="saveBtn">保存頭像到本地</button>

  </view>

</view>

在pages/index/index.wxss中設定樣式：

/* pages/avantar/avantar.wxss */

canvas {
    position: fixed;
    top: 0;
    left: 400px;
    width: 1125px;
    height: 1125px;
  }
  
  .tag {
    width: 200px;
    height: 200px;
    position: absolute;
    top: 30px;
    left: 20%;
    z-index: 3;
    border: 1px dashed rgba(9, 241, 79, 0.863);
  }
  
  .preview {
    width: 100%;
    height: 100%;
    background: gainsboro;
    position: absolute;
    z-index: 2;
  }
  
  .bottomAll {
    width: 100%;
    position: absolute;
    bottom: 80rpx;
    z-index: 3;
  }
  
  .btnAll {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  
  .btn {
    width: 107rpx;
    height: 107rpx;
    border: none;
    padding: 0;
    margin: 0;
  }
  
  .demoImg {
    width: 100%;
    height: 100%;
  }
  
  .saveBtn {
    border-radius: 20rpx;
    background: #faa755;
    color: white;
    margin: 20rpx;
  }
  
  .tipTxt {
    color: #f05b72;
    margin: 20rpx;
    font-size: 38rpx;
  }

然后在 pages/index/index.js 定義函式功能：

通過wx.chooseImage選擇相冊中的圖片，

    generateAvantar:function(e){
        let that = this
        let index=e.currentTarget.dataset.k
        wx.chooseImage({
          count: (0),
          success(res){
              console.log('本地圖片已獲取',res.tempFilePaths[0])
              that.drawImg(res.tempFilePaths[0],index)
          }
        })
    },

通過drawImg將影像和邊框合并，

   drawImg(avatarUrl, index) {
        this.setData({
          msg: index + "~~~" + avatarUrl
        })
    
        let that = this;
        wx.showLoading({
          title: '努力生成中...'
        })
        let promise1 = new Promise(function (resolve, reject) {
          wx.getImageInfo({
            src: avatarUrl,
            success: function (res) {
              console.log("promise1", res)
              resolve(res);
            }
          })
        });

        let promise2 = new Promise(function (resolve, reject) {
          wx.getImageInfo({
            src: `../../static/images/head${index}.png`,
            success: function (res) {
              resolve(res);
            },
          })
        });

        Promise.all([
          promise1, promise2
        ]).then(res => {
          //主要就是計算好各個圖文的位置
          let num = 1125;
          that.setData({
            prurl: res[0].path
          })
          ctx.drawImage(res[0].path, 0, 0, num, num)
          ctx.drawImage('../../' + res[1].path, 0, 0, num, num)
          ctx.draw(false, () => {
            wx.canvasToTempFilePath({
              x: 0,
              y: 0,
              width: num,
              height: num,
              destWidth: num,
              destHeight: num,
              canvasId: 'shareImg',
              success: function (res) {
                console.log(res.tempFilePath);
                that.setData({
                  prurl: res.tempFilePath
                })
                wx.hideLoading()
              },
              fail: function (res) {
                wx.hideLoading()
              }
            })
          })
        })
      },

通過save函式保存圖片，

save: function () {
    var that = this
    wx.saveImageToPhotosAlbum({
    filePath: that.data.prurl,
    success(res) {
        wx.showModal({
        content: '圖片已保存到相冊，趕緊曬一下吧~',
        showCancel: false,
        confirmText: '好噠',
        confirmColor: '#72B9C3',
        success: function (res) {
            if (res.confirm) {
            console.log('用戶點擊確定');
            }
        }
        })
    }
    })
},

效果如下：

三、總結

其實這個小程式實作起來并不是很難，只有一些簡單的事件系結，只需要了解一些小程式基本的api，就能夠開發出來，大家有時間的可以去試試，后臺我已經搭好了，大家可以直接使用，可以看看效果，

有疑問的記得留言哦，我會盡力解答的，本次教程的原始碼可以通過下方的鏈接獲得，