首頁 > 文章 > 微信小程式 > 手把手帶你實現虎年頭像框製作小程式（實踐）

手把手帶你實現虎年頭像框製作小程式（實踐）

青灯夜游轉載: 2022-01-19 10:29:367058瀏覽

虎年春節快來了，如何為圖片添加上虎年頭像框，以下這篇文章帶大家製作一個小程式來實現這個功能，希望對大家有幫助！

又到了一年的結尾，感覺時間過的逝賊雞兒快，一晃一年就沒了，一晃一年又沒了。

記得去年由於疫情的原因沒有回家過年，年三十的晚上就在家族微信群裡面發那種通過玩遊戲獲得紅包的小程序，也是很歡樂的。

雖然我自己沒開發過小遊戲，但是小程式還是寫過一些，這不最近看到很多朋友都換上了新年頭像。就像下面這種的：

手把手帶你實現虎年頭像框製作小程式（實踐）

看了下主要就是兩個部分：圖片相框疊加保存為一張圖片，那我也可以去實現一個。

於是就有了這篇文章，自製虎年頭像框小程式。

實作

話不多說，先上效果圖。

手把手帶你實現虎年頭像框製作小程式（實踐）

1、實作原理

#透過效果圖可以看到，在這個地方用到了兩張圖片：

一張是透過「取得頭像」按鈕取得的微信使用者的頭像，用作底圖；

另外一張是相框圖片，這是預製的靜態資源；

在點擊「儲存頭像」的時候，將上面兩張圖片分別透過canvas畫到畫板上，先畫底圖，在畫相框圖，繪製完成後將畫板上的圖片儲存到本地就完事了。

下面開始介紹具體的實作步驟。

手把手帶你實現虎年頭像框製作小程式（實踐）

2、收集靜態資源

#在我這個小程式中內建了一些靜態資源，例如：頭像框圖片、首頁背景圖片、底部導覽列圖示等。

這些圖片來自下面這幾個網站，僅供參考。

阿里巴巴向量圖示庫

https://www.iconfont.cn/

取得圖示的好去處。

千圖網

https://www.58pic.com/

取得背景圖片、頭像方塊等的好去處。

3、編碼

分成三個部分介紹編碼這個階段。

3.1 取得微信用戶頭像

微信小程式提供有api取得微信用戶資訊。 wx.getUserProfile(Object object)

透過button按鈕點擊，取得微信使用者資訊：

<button bindtap="getUserProfile" class="btn1">获取头像</button>

getUserProfile實作如下：

    // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
    getUserProfile(e) {
      let that = this;
      wx.getUserProfile({
          desc: &#39;仅用于生成头像使用&#39;, // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
          success: (res) => {
            //获取高清用户头像
            let url = res.userInfo.avatarUrl;
            while (!isNaN(parseInt(url.substring(url.length - 1, url.length)))) {
              url = url.substring(0, url.length - 1)
            }
            url = url.substring(0, url.length - 1) + "/0";
            res.userInfo.avatarUrl = url;
            that.setData({
              userInfo: res.userInfo,
              hasUserInfo: true
            })
          }
        });
    },

到這裡取得微信用戶頭像已經完成。

備註：透過res.userInfo預設回傳的使用者頭像是低解析度的，要取得使用者頭像高清圖需要處理。

3.2 繪製圖像

繪製圖主要用到了微信小程式提供畫布相關API（https://developers.weixin .qq.com/miniprogram/dev/api/canvas/wx.createOffscreenCanvas.html）

變數說明：

hotArr:[{name:'虎年相框',key:'hunian'},{name:'虎頭帽子',key:'shendan'},{name:'國旗',key:'guoqing'}],

curHot：用於存放目前選擇的hotArr的索引。

windowWidth: wx.getSystemInfoSync().windowWidth

size: 260; //自定義的大小

pc : wx.createCanvasContext('myCanvas');

drawImg(){
      wx.showLoading({
        title: &#39;生成头像中...&#39;,
      })
      let that = this;
      let type = this.data.hotArr[this.data.curHot].key;
      let promise1 = new Promise(function(resolve, reject) {
        wx.getImageInfo({
          src: that.data.userInfo.avatarUrl,
          success: function(res) {
            resolve(res);
          }
        })
      });
      var index = that.data.defaultImg;
      let promise2 = new Promise(function(resolve, reject) {
        wx.getImageInfo({
          src: `../../images/${type}/hat${index}.png`,
          success: function(res) {
            resolve(res);
          }
        })
      });
      Promise.all([
        promise1, promise2
      ]).then(res => {
        //主要就是计算好各个图文的位置
        pc.clearRect(0, 0, windowWidth, size);
        //绘制背景图
        pc.drawImage(res[0].path, windowWidth/2-130, 0, size, size)
        //绘制相框图
        pc.drawImage(&#39;../../&#39; + res[1].path, windowWidth/2-130, 0, size, size)
        pc.stroke()
        pc.draw(false, () => {
            //图片绘制成功回调,调用保存canvas方法
            this.canvasToTempFile();
        })
      })
    },

wx.getImageInfo() 主要用於取得圖片的資訊,傳回圖片的本機路徑；

這個地方主要是因為drawImage() 只支援繪製本地圖片。

3.3 儲存圖像

在上一步我們已經將兩張圖片繪製到畫布上面了，下面將畫布上的內容儲存到本地。

將畫布上的內容儲存到本地相簿也分為兩個步驟。

第一步：把目前畫布指定區域的內容匯出產生指定大小的圖片。

通过使用 wx.canvasToTempFilePath()

第二步：将保存图片本地相册。

通过使用 wx.saveImageToPhotosAlbum（https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.saveImageToPhotosAlbum.html）

 canvasToTempFile(){
    wx.canvasToTempFilePath({
      x: windowWidth/2-130,  //这个地方减去130是因为我们的图片尺寸设置的是260
      y: 0,
      height: size,
      width: size,
      canvasId: &#39;myCanvas&#39;,
      success: (res) => {
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success: result => {
            wx.hideLoading();
            wx.showModal({
              content: &#39;图片已保存到相册,请前往微信去设置哟!&#39;,
              showCancel: false,
              success: function(res) {
                if (res.confirm) {
                  console.log(&#39;用户点击确定&#39;);
                }
              }
            })
          }, fail(e) {
            wx.hideLoading();
            console.log("err:" + e);
          }
        })
      }
    });
  },

到这里也就实现了基本的头像框功能。

最后

感兴趣的小伙伴可以扫码体验：

手把手帶你實現虎年頭像框製作小程式（實踐）

当然了，基于上面的内容你也可以制作自己的头像小程序。

最后提前恭祝大家春节快乐，虎年大吉！！！

手把手帶你實現虎年頭像框製作小程式（實踐）

【相关学习推荐：小程序开发教程】

以上是手把手帶你實現虎年頭像框製作小程式（實踐）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

html Object canvas 微信小程序 https

陳述：

本文轉載於：juejin.cn。如有侵權，請聯絡admin@php.cn刪除

上一篇：淺析如何從小程式跳到H5頁？（範例解析）下一篇：淺析如何從小程式跳到H5頁？（範例解析）

看更多