The Spring Festival of the Year of the Tiger is coming soon. How to add the Year of the Tiger avatar frame to the picture. The following article will show you how to make a small program to realize this function. I hope it will be helpful to you!

It’s the end of another year. It feels like time is passing by so fast. One year is gone in a flash, and another year is gone in a flash.

I remember that I didn’t go home to celebrate the New Year last year due to the epidemic. On the night of New Year’s Eve, I posted a small program in the family WeChat group to get red envelopes by playing games. It was also very happy.

Although I have never developed small games myself, I have written some small programs. Recently, I have seen many friends change their New Year avatars. Just like the following:

# After looking at it, there are mainly two parts: picture, photo frame, overlay and save as one picture, then I can also implement one.

So there is this article, a homemade Year of the Tiger avatar frame applet.

Realization

Without further ado, let’s start with the renderings.

1. Implementation principle

As you can see from the renderings, two methods are used here. Pictures:

One is the avatar of a WeChat user obtained through the "Get Avatar" button, used as a base map;

The other is a photo frame picture, which is a pre-made static resource;

When you click "Save Avatar", draw the above two pictures to the drawing board through canvas. First draw the base picture, and then draw the photo frame. After the drawing is completed, save the pictures on the drawing board locally. It's done.

The specific implementation steps will be introduced below.

2. Collect static resources

There are some static resources built into my small program. For example: avatar frame picture, homepage background picture, bottom navigation bar icon, etc.

These pictures are from the following websites and are for reference only.

Alibaba VectorIcon Library

https://www.iconfont.cn/

A good place to get icons .

千圖網(wǎng)

https://www.58pic.com/

A good place to get background pictures, avatar frames, etc.

3. Coding

is divided into three parts to introduce the coding stage.

3.1 Obtain WeChat user avatar

The WeChat applet provides an API to obtain WeChat user information. wx.getUserProfile(Object object)

Get WeChat user information by clicking the button button:

<button bindtap="getUserProfile" class="btn1">獲取頭像</button>

getUserProfile is implemented as follows:

    // 推薦使用wx.getUserProfile獲取用戶信息，開發(fā)者每次通過該接口獲取用戶個人信息均需用戶確認
    getUserProfile(e) {
      let that = this;
      wx.getUserProfile({
          desc: '僅用于生成頭像使用', // 聲明獲取用戶個人信息后的用途，后續(xù)會展示在彈窗中，請謹慎填寫
          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
            })
          }
        });
    },

Getting the WeChat user avatar here has been completed.

Note: The user avatar returned by res.userInfo is low-resolution by default, and processing is required to obtain a high-definition image of the user avatar.

3.2 Drawing images

Drawing images mainly use the Canvas related API provided by the WeChat applet (https://developers.weixin .qq.com/miniprogram/dev/api/canvas/wx.createOffscreenCanvas.html)

Variable description:

hotArr:[{name:'Year of the Tiger Photo Frame ',key:'hunian'},{name:'tiger head hat',key:'shendan'},{name:'national flag',key:'guoqing'}],

curHot: used for Stores the index of the currently selected hotArr.

windowWidth: wx.getSystemInfoSync().windowWidth

size: 260; //Customized size

pc : wx.createCanvasContext('myCanvas');

drawImg(){
      wx.showLoading({
        title: '生成頭像中...',
      })
      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('../../' + res[1].path, windowWidth/2-130, 0, size, size)
        pc.stroke()
        pc.draw(false, () => {
            //圖片繪制成功回調(diào),調(diào)用保存canvas方法
            this.canvasToTempFile();
        })
      })
    },

wx.getImageInfo() is mainly used to obtain image information and return the local path of the image;

This place is mainly because drawImage() Only supports drawing local images.

3.3 Save the image

In the previous step we have drawn two pictures onto the canvas, now we will save the contents on the canvas locally.

Saving the content on the canvas to the local album is also divided into two steps.

Step one: Export the contents of the specified area of ??the current canvas to generate a picture of the specified size.

通過使用 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是因為我們的圖片尺寸設(shè)置的是260
      y: 0,
      height: size,
      width: size,
      canvasId: 'myCanvas',
      success: (res) => {
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success: result => {
            wx.hideLoading();
            wx.showModal({
              content: '圖片已保存到相冊,請前往微信去設(shè)置喲!',
              showCancel: false,
              success: function(res) {
                if (res.confirm) {
                  console.log('用戶點擊確定');
                }
              }
            })
          }, fail(e) {
            wx.hideLoading();
            console.log("err:" + e);
          }
        })
      }
    });
  },

到這里也就實現(xiàn)了基本的頭像框功能。

最后

感興趣的小伙伴可以掃碼體驗：

當(dāng)然了，基于上面的內(nèi)容你也可以制作自己的頭像小程序。

最后 提前恭祝大家春節(jié)快樂，虎年大吉?。?！

【相關(guān)學(xué)習(xí)推薦：小程序開發(fā)教程】

The above is the detailed content of Take you step by step to implement the small program for making avatar frame for the Year of the Tiger (Practice). For more information, please follow other related articles on the PHP Chinese website!