First, write in front:

On September 24, circle of friends, the wave of patriotic wind, all in the activities of the National Day exclusive head, should be flooded your brother circle of friends, as a programmer, code from life, the author, a hand from the principle of thought for a moment, it is very simple, as a result, their lu made a “National Day avatar” small programs to ~, now is just a small demo, The effect is shown in the picture below (the UI is basically transferred to the original Tencent News event interface). Many functions are not provided because of the config configuration required by wechat API call. For projects built based on Vue2.6x, the source code can be moved to



Ii. Previously:

On the morning of September 24, many people’s circle of friends looks like this:



Tencent news officially launched a campaign to “welcome the National Day change your face”, where you can get your National Day portrait, including the 70th commemorative badge, a small national flag, but the official closed the campaign after only one day.

Next thing you know, we just masturbate ourselves and get in the car

Three, brief analysis of the implementation principle

In fact, we look at the page, the content is very simple, is a rotation map to switch the National Day background border, and then click save, in fact, here is involved in Canvas knowledge, can probably be divided into the following steps:

  • 1. Obtain or upload wechat profile picture
  • 2. Canvas realizes drawing and head composition: Canvas realizes positioning drawing and composition of two pictures
  • 3. Save the synthesized picture. Convert the picture to Base64 and save the head picture


4. Build the project

This project is built based on Vue2.6x

The first step is to cut the layout

This is the most basic front-end skills, I will skip, here is mainly a rotation diagram implementation, in this project, I split this into a rotation component, the current writing is no transition animation effects (interested students can optimize it, add a switch animation), as shown below



Directory components/slideshow. Vue

<template>
  <div class="slideshow-warpper">
    <div class="img-warpper">
      <div class="border-img">
        <img :src="borderImgList[nowIndex].src" ref="isBorderImg" />
      </div>
      <div class="head-img">
        <img :src="headImg" ref="isHeadImg" />
      </div>
    </div>
    <div class="btn" @click="goto(prevIndex)"></div>
    <div class="btn next" @click="goto(nextIndex)"></div>
  </div>
</template>Copy the code

<script>
export default {
  name: "slideshow",
  props: ["borderImgList"."headImg"].data() {
    return {
      nowIndex: 0,
      selectBorderImg: this.borderImgList[0].src
    };
  },
  methods: {
    goto(index) {
      this.nowIndex = index;
      this.selectBorderImg = this.borderImgList[index].src;
    }
  },
  computed: {
    prevIndex() {
      if (this.nowIndex === 0) {
        return this.borderImgList.length - 1;
      } else {
        returnthis.nowIndex - 1; }},nextIndex() {
      if (this.nowIndex === this.borderImgList.length - 1) {
        return 0;
      } else {
        returnthis.nowIndex + 1; }}}}; </script>Copy the code

The code here is very plain, basically just an array background border background, and then loop. The logic here is simple,

SRC =” variable “SRC =” variable” SRC =” variable “SRC =” variable

For example, the parent component passes a URL to an image if you have a child component

URL = '/assets/border1.png'Copy the code

<img :src="URL"  />Copy the code

That’s not going to show up

But you can load images in the child component directly

<img :src="/assets/border1.png"  />Copy the code


The solution, usually, is to add require(), for example

headImg: require(".. /assets/test.jpg"),Copy the code


Step 2: Canvas composite image

This involves the use of some simple canvas tags

1. First we need to create a Canvas element, create the canvas drawing environment, and set the length and width of the canvas

2. Use the drawImage method (more details can be moved) to draw two photos and combine them into one photo

3, set to return to the format of the images, HTMLCanvasElement. ToDataURL () method

    save() {
      let slideshowChild = this.$refs.slideshowChild.$refs;
      let canvas = document.getElementById("myCanvas");
      let ctx = canvas.getContext("2d");
      canvas.width = 150;
      canvas.height = 150;
      ctx.drawImage(slideshowChild.isHeadImg, 0, 0, 150, 150);
      ctx.drawImage(slideshowChild.isBorderImg, 0, 0, 150, 150);
      let urlSrc = canvas.toDataURL("img/png");
      this.showCanvas = true;
      console.log(urlSrc);
//    wx.saveImageToPhotosAlbum({
//      filePath: urlSrc
//    });
   },Copy the code

The following

We can test it with a picture.






Get or upload your profile picture

This involves wechat Weixin-js-SDK, install it in the project

npm install weixin-js-sdkCopy the code

Next, because when users enter the page from wechat, they need to be authorized to obtain user information. Here, both wechat web development and small program development involve authorization. Specifically, the web authorization process is divided into four steps:

1. Direct the user to the authorization page to approve the authorization and obtain the code

Access_token (different from access_token in base support)

3. If necessary, developers can refresh the web license access_token to avoid expiration

4. Access user basic information through web authorization Access_token and OpenID (support UnionID mechanism)

Here you can get the wechat profile picture

Of course, this requires you to apply for an account on the wechat public platform. The author has not played the personal public account and the development account of the small program for too long and has been frozen. These functions will be completed later

There are apis for uploading images and saving them

This project is partially encapsulated in/API/sdK.js


Five, the last

Article wrote here, put an end to the basic, so the activities of the fire, behind is actually can with such a simple code, the code originates from life, hey hey, isn’t it interesting, currently WeChat SDK related part of the code is not upload, I can give you brother, download to play, of course, I also will completion as soon as possible. National Day arrived, I wish you old iron, happy National Day ah ~

[Source address portal]