Heim > WeChat-Applet > Mini-Programmentwicklung > Entwickeln Sie ein kleines Programm zur Generierung von Avataren für das Frühlingsfest im Jahr des Tigers

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

青灯夜游
Freigeben: 2022-01-28 15:55:05
nach vorne
3045 Leute haben es durchsucht

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!

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

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:

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

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();
      }
    });
  },
Nach dem Login kopieren

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()
  },
Nach dem Login kopieren

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);
          }
        })
      }
    });
  },
Nach dem Login kopieren

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:

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

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!

Verwandte Etiketten:
Quelle:juejin.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage