Führen Sie Schritt für Schritt durch die Umsetzung des kleinen Programms zur Erstellung eines Avatar-Rahmens für das Jahr des Tigers (Übung).

Das Frühlingsfest des Jahres des Tigers steht vor der Tür. So fügen Sie dem Bild den Avatar-Rahmen „Jahr des Tigers“ hinzu. Ich hoffe, dass dies der Fall ist hilfreich für Sie!

Es ist das Ende eines weiteren Jahres. Es fühlt sich an, als würde die Zeit so schnell vergehen, und ein weiteres Jahr vergeht wie im Flug.

Ich erinnere mich, dass ich letztes Jahr wegen der Epidemie nicht nach Hause gegangen bin, um das neue Jahr zu feiern. In der Nacht des Silvesterabends habe ich in der WeChat-Gruppe der Familie ein kleines Programm gepostet, um rote Umschläge zu bekommen war auch sehr zufrieden.

Obwohl ich selbst nie Minispiele entwickelt habe, habe ich in letzter Zeit einige Miniprogramme geschrieben, wie viele Freunde ihre Avatare für das neue Jahr geändert haben. Genau wie das Folgende:

Nach dem Betrachten gibt es hauptsächlich zwei Teile: Bild + Fotorahmen und als ein Bild speichern, dann kann ich auch eines umsetzen.

Hier ist dieser Artikel, ein selbstgemachtes Avatar-Frame-Applet für das Jahr des Tigers.

Leistung

Lassen Sie uns ohne weitere Umschweife mit den Renderings beginnen. 1. Implementierungsprinzip Basiskarte;

Das andere ist ein Fotorahmenbild, bei dem es sich um eine vorgefertigte statische Ressource handelt.

Wenn Sie auf „Avatar speichern“ klicken, zeichnen Sie zuerst die Basiskarte und Zeichnen Sie dann einen Bilderrahmen und speichern Sie das Bild nach Abschluss der Zeichnung lokal auf dem Zeichenbrett. Fertig.

Die konkreten Umsetzungsschritte werden im Folgenden vorgestellt.

2. Statische Ressourcen sammeln

Ich habe einige statische Ressourcen in dieses kleine Programm integriert, wie zum Beispiel: Avatar-Rahmenbilder, Homepage-Hintergrundbilder, Symbole der unteren Navigationsleiste usw.

Diese Bilder stammen von den folgenden Websites und dienen nur als Referenz.

Alibaba Vector

Icon Libraryhttps://www.iconfont.cn/

Ein guter Ort, um Icons zu bekommen.

Qiantu.com

https://www.58pic.com/

Ein guter Ort, um Hintergrundbilder, Avatar-Rahmen usw. zu erhalten.

3. Codierung

ist in drei Teile unterteilt, um die Codierungsphase einzuführen.

3.1 WeChat-Benutzer-Avatar abrufen

Das WeChat-Applet stellt eine API zum Abrufen von WeChat-Benutzerinformationen bereit.

wx.getUserProfile(Objektobjekt)Klicken Sie auf die Schaltfläche, um WeChat-Benutzerinformationen zu erhalten:

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

getUserProfile wird wie folgt implementiert:

    // 推荐使用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
            })
          }
        });
    },

Das Abrufen des WeChat-Benutzeravatars ist hier abgeschlossen.

Hinweis: Der von res.userInfo zurückgegebene Benutzer-Avatar hat standardmäßig eine niedrige Auflösung. Um ein hochauflösendes Bild des Benutzer-Avatars zu erhalten, muss es verarbeitet werden.

3.2 Zeichnen von Bildern

Zeichnen von Bildern verwendet hauptsächlich die

Leinwandbezogene API, die vom WeChat-Applet bereitgestellt wird

(https://developers.weixin.qq.com/miniprogram/dev/api/canvas/wx.createOffscreenCanvas. html )

Variablenbeschreibung:

hotArr:[{name:'Year of the Tiger Photo Frame',key:'hunian'},{name:'Tiger Head Hat',key:'shendan'},{ name:'Flag ',key:'guoqing'}],

curHot: Wird zum Speichern des Index des aktuell ausgewählten hotArr verwendet.

windowWidth: wx.getSystemInfoSync().windowWidth

size: 260; //Benutzerdefinierte Größ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()

Wird hauptsächlich zum Abrufen von Bildinformationen verwendet , gibt den lokalen Pfad des Bildes zurück;

Dies liegt hauptsächlich daran, dass

drawImage()

nur das Zeichnen lokaler Bilder unterstützt.

3.3 Speichern Sie das Bild

Im vorherigen Schritt haben wir zwei Bilder auf die Leinwand gezeichnet, jetzt speichern wir den Inhalt lokal auf der Leinwand.

Das Speichern des Inhalts auf der Leinwand im lokalen Album ist ebenfalls in zwei Schritte unterteilt.

Schritt eins: Exportieren Sie den Inhalt des angegebenen Bereichs der aktuellen Leinwand, um ein Bild der angegebenen Größe zu generieren.

通过使用 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);
          }
        })
      }
    });
  },

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

最后

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

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

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

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

Das obige ist der detaillierte Inhalt vonFühren Sie Schritt für Schritt durch die Umsetzung des kleinen Programms zur Erstellung eines Avatar-Rahmens für das Jahr des Tigers (Übung).. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!