Bawa anda membangunkan program kecil untuk menjana avatar untuk Tahun Harimau dan Festival Musim Bunga

Artikel ini akan membawa anda mengikuti arah aliran dan membuat program kecil untuk membuat avatar untuk Tahun Festival Musim Bunga Harimau Dapatkan avatar WeChat dan pilih bingkai avatar untuk mensintesis avatar Tahun Musim Bunga Harimau I harap ia akan membantu semua orang!

Festival Musim Bunga akan datang Hari ini saya melihat seorang netizen berkongsi alat penciptaan avatar Tahun Harimau. Rasanya sangat bagus buat program kecil untuk berlatih, kemudian cuba dengan yang ini.

Mula-mula rendering terakhir:

Mari kita bincangkan proses pelaksanaan

Langkah pertama: dapatkannya pertama Kod utama untuk gambar avatar WeChat semasa adalah seperti berikut Ambil perhatian bahawa gambar avatar yang diperoleh secara lalai bukan definisi tinggi dan perlu ditukar kepada gambar definisi tinggi terlebih dahulu untuk mengelakkan kabur selepas generasi.

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

Langkah 2: Mensintesis avatar Dapatkan fail setempat daripada gambar bahan dan gambar avatar yang diperoleh pada langkah pertama, dan kemudian gunakan komponen cavas program mini untuk mensintesisnya.

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

Langkah 3: Muat turun gambar yang disintesis ke album tempatan.

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

Dengan cara ini, fungsi utama tercapai.

Akhir sekali, letakkan kod program mini, semua orang dialu-alukan untuk mengimbas kod dan mengalaminya:

Akhir sekali, projek semasa telah sumber terbuka: https://github.com/hackun666/new-year-face

Saya ucapkan selamat menyambut Pesta Musim Bunga dan semoga berjaya dalam Tahun Harimau!

Alamat asal: https://juejin.cn/post/7057807283463389191

Pengarang: hackun

[Cadangan pembelajaran berkaitan: 】

Atas ialah kandungan terperinci Bawa anda membangunkan program kecil untuk menjana avatar untuk Tahun Harimau dan Festival Musim Bunga. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!