Entwickeln Sie ein kleines Programm zur Generierung von Avataren für das Frühlingsfest im Jahr des Tigers

Dieser Artikel führt Sie dazu, dem Trend zu folgen und ein kleines Programm zum Erstellen von Avataren für das Frühlingsfest im Jahr des Tigers zu erstellen. Holen Sie sich einen WeChat-Avatar, wählen Sie den Avatar-Rahmen aus und synthetisieren Sie dann verschiedene Avatare für das Frühlingsfest im Jahr des Tigers . Ich hoffe, es wird für alle hilfreich sein!

Das Frühlingsfest steht vor der Tür. Heute habe ich gesehen, wie einige Internetnutzer die Webversion des Avatar-Erstellungstools für das Jahr des Tigers geteilt haben. Ich hatte gerade vor, ein kleines Programm zum Üben ohne Thema zu erstellen. Probieren Sie es also mal mit diesem hier aus.

Zuerst die endgültigen Renderings:

Lassen Sie uns über den Implementierungsprozess sprechen

Schritt 1: Holen Sie sich das aktuelle WeChat-Avatarbild. Beachten Sie, dass das standardmäßig erhaltene Avatarbild nicht hoch ist -Definition. Sie müssen zuerst in hochauflösende Bilder konvertieren, um verschwommene Bilder nach der Generierung zu vermeiden.

 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();
      }
    });
  },

Schritt 2: Synthetisieren Sie den Avatar aus dem im ersten Schritt erhaltenen Materialbild und dem Avatar-Bild und verwenden Sie dann die Cavas-Komponente des Miniprogramms, um sie zu synthetisieren.

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()
  },

Schritt 3: Laden Sie das synthetisierte Bild in das lokale Album herunter.

canvasToTempFile(){
    if(!this.data.userInfo){
      wx.showModal({
        title: '温馨提示',
        content: '请先点击上方获取微信头像',
        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: '图片已保存到相册,请前往微信去设置哟!',
              showCancel: false,
              success: function(res) {
                if (res.confirm) {
                  console.log('用户点击确定');
                }
              }
            })
          }, fail(e) {
            wx.hideLoading();
            console.log("err:" + e);
          }
        })
      }
    });
  },

Auf diese Weise wird die Hauptfunktion erreicht.

Zuletzt geben Sie den Mini-Programmcode ein, jeder ist herzlich eingeladen, den Code zu scannen und zu erleben:

Endlich ist das aktuelle Projekt Open Source: https://github.com/hackun666/new-year- Gesicht

Ich wünsche allen ein frohes Frühlingsfest und viel Glück im Jahr des Tigers!

Ursprüngliche Adresse: https://juejin.cn/post/7057807283463389191

Autor: Hackun

[Verwandte Lernempfehlungen:

Mini-Tutorial zur Programmentwicklung]

Das obige ist der detaillierte Inhalt vonEntwickeln Sie ein kleines Programm zur Generierung von Avataren für das Frühlingsfest im Jahr des Tigers. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!