微信小程序如何實(shí)現(xiàn)虎年春節(jié)頭像制作

這篇文章主要介紹微信小程序如何實(shí)現(xiàn)虎年春節(jié)頭像制作，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

先上最終效果圖：

說下實(shí)現(xiàn)流程

第一步：先獲取到當(dāng)前微信的頭像圖片，主要代碼如下，注意默認(rèn)獲取到的頭像圖片不是高清的，需要先轉(zhuǎn)換成高清圖片，避免生成之后很模糊。

 getUserProfile(e) {
    console.log(e)
    let that = this;
    wx.getUserProfile({
      desc: '僅用于生成頭像使用',
      success: (res) => {
        var 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;
        console.log(JSON.stringify(res.userInfo));
        that.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
        that.drawImg();
      }
    });
  },

第二步：合成頭像，把素材圖片和第一步獲取到的頭像圖片，獲取到本地文件，然后利用小程序的cavas組件進(jìn)行合成。

drawImg() {
    let that = this;
    wx.showLoading({
      title: '生成頭像中...',
    })
    let promise1 = new Promise(function (resolve, reject) {
      wx.getImageInfo({
        src: that.data.userInfo.avatarUrl,
        success: function (res) {
          resolve(res);
        }
      })
    });
    var mask_id = that.data.now_mask;
    let promise2 = new Promise(function (resolve, reject) {
      wx.getImageInfo({
        src: `../../assets/img/mask0${mask_id}.png`,
        success: function (res) {
          console.log(res)
          resolve(res);
        }
      })
    });
    Promise.all([
      promise1, promise2
    ]).then(res => {
      console.log(res)
      var windowWidth = wx.getSystemInfoSync().windowWidth
      var context = wx.createCanvasContext('myAvatar');
      var size = windowWidth /750 * 500
      // var size = 500
      context.drawImage(res[0].path, 0, 0, size, size);
      context.draw(true)
      context.save();
      context.drawImage('../../'+res[1].path, 0, 0, size, size);
      context.draw(true)
      context.save();

    })
    wx.hideLoading()
  },

第三步：下載合成的圖片到本地相冊(cè)。

canvasToTempFile(){
    if(!this.data.userInfo){
      wx.showModal({
        title: '溫馨提示',
        content: '請(qǐng)先點(diǎn)擊上方獲取微信頭像',
        showCancel: false,
      })
      return
    }
    var windowWidth = wx.getSystemInfoSync().windowWidth
    var size = 500
    // var dpr = 750 / windowWidth
    wx.canvasToTempFilePath({
      x: 0,
      y: 0,
      height: size,
      width: size,
      canvasId: 'myAvatar',
      success: (res) => {
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success: result => {
            wx.hideLoading();
            wx.showModal({
              content: '圖片已保存到相冊(cè),請(qǐng)前往微信去設(shè)置喲!',
              showCancel: false,
              success: function(res) {
                if (res.confirm) {
                  console.log('用戶點(diǎn)擊確定');
                }
              }
            })
          }, fail(e) {
            wx.hideLoading();
            console.log("err:" + e);
          }
        })
      }
    });
  },

這樣就實(shí)現(xiàn)了主要的功能了。

以上是“微信小程序如何實(shí)現(xiàn)虎年春節(jié)頭像制作”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！