Vous emmène développer un petit programme pour générer des avatars pour l'Année du Tigre et la Fête du Printemps

Cet article vous amènera à suivre la tendance et à créer un petit programme de création d'avatars pour l'Année du Festival du Printemps du Tigre. Obtenez un avatar WeChat, sélectionnez le cadre de l'avatar, puis synthétisez différents avatars pour l'Année du Festival du Printemps du Tigre. . J'espère que cela sera utile à tout le monde !

La Fête du Printemps arrive bientôt. Aujourd'hui, j'ai vu des internautes partager la version web de l'outil de création d'avatar de l'Année du Tigre. Ça fait du bien, j'ai juste prévu de faire un petit programme pour m'entraîner sans aucun thème, alors essayez-le avec celui-ci.

Tout d'abord les rendus finaux :

Parlons du processus de mise en œuvre

Étape 1 : Obtenez l'image de l'avatar WeChat actuelle Le code principal est le suivant Notez que l'image de l'avatar obtenue par défaut n'est pas haute. -définition. Vous devez d'abord convertir en images haute définition pour éviter les images floues après génération.

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

Étape 2 : Synthétisez l'avatar. Obtenez le fichier local à partir de l'image matérielle et de l'image de l'avatar obtenues dans la première étape, puis utilisez le composant cavas du mini programme pour le synthétiser.

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

Étape 3 : Téléchargez l'image synthétisée sur l'album local.

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

De cette façon, la fonction principale est réalisée.

Enfin, mettez le code du mini programme, tout le monde est invité à scanner le code et à en faire l'expérience :

Enfin, le projet actuel est open source : https://github.com/hackun666/new-year- face

Je souhaite à tous une bonne Fête du Printemps et bonne chance pour l'Année du Tigre !

Adresse originale : https://juejin.cn/post/7057807283463389191

Auteur : hackun

[Recommandations d'apprentissage associées : Tutoriel de développement de mini-programmes]

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!