寅年の春節に向けてアバターを生成する小さなプログラムを開発してみましょう。

この記事は、トレンドを追い、寅年春節用のアバターを作成するための小さなプログラムを作成するのに役立ちます。WeChat アバターを取得し、アバター フレームを選択して、さまざまな寅年春節アバターを合成してください。できれば幸いです。誰にとっても役に立つでしょう！

春節がもうすぐ始まります。今日、一部のネチズンがウェブ版の寅年のアバター作成ツールを共有しているのを見ました。とても良い気分です。ちょうど計画を立てていたところです。テーマを練習するための小さなプログラムを作成し、これで試してみてください。

まず、最終的なレンダリング:

実装プロセスについて話しましょう

最初のステップ: get現在の WeChat アバター画像、メイン コードは次のとおりです。デフォルトで取得されるアバター画像は高解像度ではないため、生成後にぼやけることを避けるために、最初に高解像度画像に変換する必要があることに注意してください。

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

第 2 ステップ: アバターを合成し、素材画像と第 1 ステップで取得したアバター画像からローカル ファイルを取得し、ミニ プログラムの cavas コンポーネントを使用して合成します。

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

ステップ 3: 合成した画像をローカル アルバムにダウンロードします。

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

このようにして、main 機能が実現されます。

最後に、ミニ プログラム コードを入力します。どなたでもコードをスキャンして体験していただけます:

最後に、現在のプロジェクトが完成しました。オープンソース: https://github.com/hackun666/new-year-face

皆さん、楽しい春節と寅年の幸運を祈ります。

元のアドレス: https://juejin.cn/post/7057807283463389191

著者: hackun

[関連する学習の推奨事項: 小プログラム開発チュートリアル]

以上が寅年の春節に向けてアバターを生成する小さなプログラムを開発してみましょう。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。