Take you step by step to implement the small program for making avatar frame for the Year of the Tiger (Practice)

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 .

千图网

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获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
    getUserProfile(e) {
      let that = this;
      wx.getUserProfile({
          desc: '仅用于生成头像使用', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
          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, () => {
            //图片绘制成功回调,调用保存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是因为我们的图片尺寸设置的是260
      y: 0,
      height: size,
      width: size,
      canvasId: 'myCanvas',
      success: (res) => {
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success: result => {
            wx.hideLoading();
            wx.showModal({
              content: '图片已保存到相册,请前往微信去设置哟!',
              showCancel: false,
              success: function(res) {
                if (res.confirm) {
                  console.log('用户点击确定');
                }
              }
            })
          }, fail(e) {
            wx.hideLoading();
            console.log("err:" + e);
          }
        })
      }
    });
  },

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

最后

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

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

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

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

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!