ホームページ > 記事 > WeChat アプレット > 寅年のアバターフレームを作成するための小さなプログラムを段階的に実装します (練習)

寅年のアバターフレームを作成するための小さなプログラムを段階的に実装します (練習)

青灯夜游転載: 2022-01-19 10:29:366876ブラウズ

もうすぐ寅年の春祭りがやってきます。写真に寅年のアバターフレームを追加する方法です。この機能を実現するための小さなプログラムの作り方を次の記事で紹介します。役に立つでしょう！

もう一年が終わります。時間が経つのがとても早く感じます。一年はあっという間に過ぎ、また一年はあっという間に過ぎます。

昨年は疫病のせいで新年を祝うために家に帰らなかったことを覚えています。大晦日の夜、家族の WeChat グループに小さなプログラムを投稿して、赤い封筒を受け取ってもらいました。ゲームもできてとても嬉しかったです。

私自身、小さなゲームを開発したことはありませんが、いくつかの小さなプログラムを書いたことがあります。最近、多くの友人が新年のアバターを変更しているのを見ました。

寅年のアバターフレームを作成するための小さなプログラムを段階的に実装します (練習)

# これを見ると、主に 2 つの部分があります。画像、フォトフレーム、オーバーレイ、1 つの画像として保存し、1 つを実装することもできます。。

この記事は、自家製の虎年のアバターフレームアプレットです。

実現

早速、レンダリングから始めましょう。

寅年のアバターフレームを作成するための小さなプログラムを段階的に実装します (練習)

#1. 実装原理

レンダリングからわかるように、ここでは 2 つのメソッドが使用されています。 . 画像:

1 つは、[アバターを取得] ボタンを通じて取得した WeChat ユーザーのアバターで、ベースマップとして使用されます。

もう 1 つは、事前に作成されたフォトフレームの画像です。 -made static resource;

「アバターを保存」をクリックしたら、上の2枚の絵をキャンバスを通して画板に描きます。まずベースとなる絵を描き、次にフォトフレームを描きます。描き終わったら、描画ボード上の画像をローカルに保存すれば完了です。

具体的な実装手順を以下に紹介します。

寅年のアバターフレームを作成するための小さなプログラムを段階的に実装します (練習)

2. 静的リソースを収集する

私の小さなプログラムにはいくつかの静的リソースが組み込まれています。例: アバターフレーム画像、ホームページ背景画像、下部ナビゲーションバーアイコンなど。

これらの写真は次の Web サイトからのものであり、参照のみを目的としています。

Alibaba Vectorアイコンライブラリ
https://www.iconfont.cn/

アイコンを入手するのに適した場所。

千图网
https://www.58pic.com/

背景画像やアバターフレームなどを入手するのに適した場所です。

3. コーディング

は 3 つの部分に分かれてコーディング段階を紹介します。

3.1 WeChat ユーザーアバターの取得

WeChat アプレットは、WeChat ユーザー情報を取得するための API を提供します。

wx.getUserProfile(Object object)

ボタンボタンをクリックして WeChat ユーザー情報を取得します:

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

getUserProfile は次のように実装されます:

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

WeChat ユーザーアバターの取得はこれで完了です。

注: res.userInfo によって返されるユーザーアバターはデフォルトでは低解像度であり、ユーザーアバターの高解像度画像を取得するには処理が必要です。

3.2 画像の描画

画像の描画では、主に WeChat アプレット (https://developers. weixin .qq.com/miniprogram/dev/api/canvas/wx.createOffscreenCanvas.html)

変数の説明:

hotArr:[{name:'年タイガーフォトフレーム ',key:'hunian'},{name:'tiger head hat',key:'shendan'},{name:'国旗',key:'guoqing'}],

curHot: 現在選択されている hotArr のインデックスを保存します。

windowWidth: wx.getSystemInfoSync().windowWidth

size: 260; //カスタマイズされたサイズ

pc : wx.createCanvasContext('myCanvas');

drawImg(){
      wx.showLoading({
        title: &#39;生成头像中...&#39;,
      })
      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(&#39;../../&#39; + res[1].path, windowWidth/2-130, 0, size, size)
        pc.stroke()
        pc.draw(false, () => {
            //图片绘制成功回调,调用保存canvas方法
            this.canvasToTempFile();
        })
      })
    },

wx.getImageInfo()

は主に画像情報を取得し、画像のローカルパスを返すために使用されます。

この場所は主に drawImage()

のためです。ローカルイメージの描画のみをサポートします。

3.3 画像を保存する

前の手順では、キャンバスに 2 つの図を描画しました。次に、キャンバスの内容をローカルに保存します。

キャンバス上のコンテンツをローカルアルバムに保存する作業も 2 つの手順に分かれています。

ステップ 1: 現在のキャンバスの指定された領域の内容をエクスポートして、指定されたサイズの画像を生成します。

通过使用 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: &#39;myCanvas&#39;,
      success: (res) => {
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success: result => {
            wx.hideLoading();
            wx.showModal({
              content: &#39;图片已保存到相册,请前往微信去设置哟!&#39;,
              showCancel: false,
              success: function(res) {
                if (res.confirm) {
                  console.log(&#39;用户点击确定&#39;);
                }
              }
            })
          }, fail(e) {
            wx.hideLoading();
            console.log("err:" + e);
          }
        })
      }
    });
  },

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