Vous guide pas à pas pour mettre en œuvre le petit programme de création de cadre d'avatar pour l'Année du Tigre (Pratique)

La Fête du Printemps de l'Année du Tigre arrive bientôt. Comment ajouter le cadre d'avatar de l'Année du Tigre à l'image L'article suivant vous montrera comment créer un petit programme pour réaliser cette fonction. utile pour vous!

C'est la fin d'une autre année. On a l'impression que le temps passe si vite. Une année s'écoule en un éclair, et une autre année s'écoule en un éclair.

Je me souviens que je ne suis pas rentré chez moi pour fêter le Nouvel An l'année dernière à cause de l'épidémie. Le soir du réveillon du Nouvel An, j'ai posté un petit programme dans le groupe WeChat familial pour obtenir des enveloppes rouges en jouant à des jeux. était également très heureux.

Bien que je n'aie jamais développé de mini-jeux moi-même, j'ai écrit quelques mini-programmes. J'ai récemment vu de nombreux amis changer d'avatar pour la nouvelle année. Tout comme ce qui suit :

Après l'avoir regardé, il y a principalement deux parties : image + cadre photo, superposez et enregistrez en une seule image, puis je peux également en implémenter une.

Voici donc cet article, une applet de cadre d'avatar de l'Année du Tigre faite maison.

Mise en œuvre

Sans plus de mots, montrons d'abord les rendus.

1. Principe de mise en œuvre

Vous pouvez voir sur les rendus que deux images sont utilisées ici :

L'une est l'avatar de l'utilisateur WeChat obtenu via le bouton "Obtenir l'avatar", avec Créer un carte de base ;

L'autre est un cadre photo, qui est une ressource statique préfabriquée.

Lorsque vous cliquez sur "Enregistrer l'avatar", dessinez les deux images ci-dessus sur la planche à dessin à travers le canevas, dessinez d'abord la carte de base ; puis dessinez un cadre photo, et une fois le dessin terminé, enregistrez l'image localement sur la planche à dessin et c'est tout.

Les étapes spécifiques de mise en œuvre seront présentées ci-dessous.

2. Collectez des ressources statiques

J'ai des ressources statiques intégrées dans ce petit programme, telles que : des images de cadre d'avatar, des images d'arrière-plan de la page d'accueil, des icônes de la barre de navigation inférieure, etc.

Ces photos proviennent des sites Web suivants et sont uniquement à titre de référence.

Alibaba VectorBibliothèque d'icônes

https://www.iconfont.cn/

Un bon endroit pour obtenir des icônes.

Qiantu.com

https://www.58pic.com/

Un bon endroit pour obtenir des images d'arrière-plan, des cadres d'avatar, etc.

3. Le codage

est divisé en trois parties pour introduire l'étape de codage.

3.1 Obtenir l'avatar de l'utilisateur WeChat

L'applet WeChat fournit une API pour obtenir des informations sur l'utilisateur WeChat. wx.getUserProfile(Object object)

Cliquez sur le bouton pour obtenir les informations sur l'utilisateur WeChat :

<button bindtap="getUserProfile" class="btn1">获取头像</button>

getUserProfile est implémenté comme suit :

    // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
    getUserProfile(e) {
      let that = this;
      wx.getUserProfile({
          desc: '仅用于生成头像使用', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
          success: (res) => {
            //获取高清用户头像
            let 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;
            that.setData({
              userInfo: res.userInfo,
              hasUserInfo: true
            })
          }
        });
    },

L'obtention de l'avatar de l'utilisateur WeChat ici est terminée.

Remarque : L'avatar de l'utilisateur renvoyé par res.userInfo est en basse résolution par défaut. Pour obtenir une image haute définition de l'avatar de l'utilisateur, un traitement est requis.

3.2 Dessiner des images

Le dessin d'images utilise principalement l'API associée au canvas fournie par l'applet WeChat (https://developers.weixin.qq.com/miniprogram/dev/api/canvas/wx.createOffscreenCanvas. html )

Description de la variable :

hotArr:[{name:'Année du cadre photo du tigre',key:'hunian'},{name:'Tiger Head Hat',key:'shendan'},{ name:'Flag ',key:'guoqing'}],

curHot : utilisé pour stocker l'index du hotArr actuellement sélectionné.

windowWidth: wx.getSystemInfoSync().windowWidth

size: 260; //Taille personnalisée

pc : wx.createCanvasContext('myCanvas');

drawImg(){
      wx.showLoading({
        title: '生成头像中...',
      })
      let that = this;
      let type = this.data.hotArr[this.data.curHot].key;
      let promise1 = new Promise(function(resolve, reject) {
        wx.getImageInfo({
          src: that.data.userInfo.avatarUrl,
          success: function(res) {
            resolve(res);
          }
        })
      });
      var index = that.data.defaultImg;
      let promise2 = new Promise(function(resolve, reject) {
        wx.getImageInfo({
          src: `../../images/${type}/hat${index}.png`,
          success: function(res) {
            resolve(res);
          }
        })
      });
      Promise.all([
        promise1, promise2
      ]).then(res => {
        //主要就是计算好各个图文的位置
        pc.clearRect(0, 0, windowWidth, size);
        //绘制背景图
        pc.drawImage(res[0].path, windowWidth/2-130, 0, size, size)
        //绘制相框图
        pc.drawImage('../../' + res[1].path, windowWidth/2-130, 0, size, size)
        pc.stroke()
        pc.draw(false, () => {
            //图片绘制成功回调,调用保存canvas方法
            this.canvasToTempFile();
        })
      })
    },

wx.getImageInfo() Principalement utilisé pour obtenir des informations sur l'image , renvoie le chemin local de l'image ;

C'est principalement parce que

drawImage() ne prend en charge que le dessin d'images locales.

3.3 Enregistrer l'image

Dans l'étape précédente, nous avons dessiné deux images sur la toile, nous allons maintenant enregistrer le contenu sur la toile localement.

L'enregistrement du contenu sur la toile dans l'album local est également divisé en deux étapes.

Première étape : exportez le contenu de la zone spécifiée du canevas actuel pour générer une image de la taille spécifiée.

通过使用 wx.canvasToTempFilePath()

第二步：将保存图片本地相册。

通过使用 wx.saveImageToPhotosAlbum（https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.saveImageToPhotosAlbum.html）

 canvasToTempFile(){
    wx.canvasToTempFilePath({
      x: windowWidth/2-130,  //这个地方减去130是因为我们的图片尺寸设置的是260
      y: 0,
      height: size,
      width: size,
      canvasId: 'myCanvas',
      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);
          }
        })
      }
    });
  },

到这里也就实现了基本的头像框功能。

最后

感兴趣的小伙伴可以扫码体验：

当然了，基于上面的内容你也可以制作自己的头像小程序。

最后 提前恭祝大家春节快乐，虎年大吉！！！

【相关学习推荐：小程序开发教程】

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!