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

青灯夜游
Libérer: 2022-01-28 15:55:05
avant
2941 Les gens l'ont consulté

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 !

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

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 :

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

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();
      }
    });
  },
Copier après la connexion

É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()
  },
Copier après la connexion

É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);
          }
        })
      }
    });
  },
Copier après la connexion

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 :

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

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!

Étiquettes associées:
source:juejin.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!