Festival Musim Bunga Tahun Harimau akan datang tidak lama lagi. Bagaimana untuk menambah bingkai avatar Tahun Harimau pada gambar Artikel berikut akan menunjukkan kepada anda cara membuat program kecil untuk merealisasikan fungsi ini membantu anda!

Ini adalah penghujung tahun yang lain. Rasanya masa berlalu begitu cepat. Satu tahun berlalu dengan sekelip mata.

Saya masih ingat bahawa saya tidak pulang ke rumah untuk menyambut Tahun Baru tahun lepas kerana wabak pada malam Malam Tahun Baru, saya menyiarkan program kecil dalam kumpulan WeChat keluarga untuk mendapatkan sampul merah oleh. bermain permainan juga sangat gembira.

Walaupun saya tidak pernah membangunkan permainan mini sendiri, saya telah menulis beberapa program mini Baru-baru ini, saya telah melihat ramai rakan menukar avatar Tahun Baru mereka. Sama seperti berikut:

Selepas melihatnya, terdapat dua bahagian utama: gambar, bingkai foto, tindanan dan simpan sebagai satu gambar, maka saya juga boleh melaksanakannya.

Oleh itu artikel ini, applet bingkai avatar Tahun Harimau buatan sendiri.

Pencapaian

Tanpa berlengah lagi, mari mulakan dengan rendering.

1. Prinsip pelaksanaan

Seperti yang anda boleh lihat daripada rendering, dua kaedah digunakan di sini Gambar:

Salah satunya ialah avatar pengguna WeChat yang diperoleh melalui butang "Dapatkan Avatar", digunakan sebagai imej asas

Yang lain ialah imej bingkai foto, yang merupakan pra- membuat sumber statik;

Apabila anda mengklik "Simpan Avatar", lukis dua gambar di atas ke papan lukisan melalui kanvas Mula-mula lukis gambar asas, dan kemudian lukis gambar bingkai gambar di papan lukisan secara tempatan.

Langkah pelaksanaan khusus akan diperkenalkan di bawah.

2 Kumpul sumber statik

Saya mempunyai beberapa sumber statik terbina dalam program kecil ini contoh: gambar bingkai avatar, gambar latar belakang halaman utama, ikon bar navigasi bawah, dsb.

Gambar-gambar ini adalah dari laman web berikut dan hanya untuk rujukan.

Vektor AlibabaPerpustakaan Ikon

https://www.iconfont.cn/

Tempat yang bagus untuk mendapatkan ikon .

Qiantu.com

https://www.58pic.com/

Tempat yang bagus untuk mendapatkan gambar latar belakang, bingkai avatar, dsb.

3. Pengekodan

Fasa pengekodan diperkenalkan dalam tiga bahagian.

3.1 Mendapatkan avatar pengguna WeChat

Aplet WeChat menyediakan API untuk mendapatkan maklumat pengguna WeChat. wx.getUserProfile(Object object)

Klik butang butang untuk mendapatkan maklumat pengguna WeChat:

<button bindtap="getUserProfile" class="btn1">獲取頭像</button>

getUserProfile dilaksanakan seperti berikut:

    // 推薦使用wx.getUserProfile獲取用戶信息，開發(fā)者每次通過該接口獲取用戶個人信息均需用戶確認(rèn)
    getUserProfile(e) {
      let that = this;
      wx.getUserProfile({
          desc: '僅用于生成頭像使用', // 聲明獲取用戶個人信息后的用途，后續(xù)會展示在彈窗中，請謹(jǐn)慎填寫
          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
            })
          }
        });
    },

Mendapatkan avatar pengguna WeChat di sini telah selesai.

Nota: Avatar pengguna yang dikembalikan oleh res.userInfo adalah peleraian rendah secara lalai Untuk mendapatkan imej definisi tinggi bagi avatar pengguna, pemprosesan diperlukan.

3.2 Melukis imej

Melukis imej terutamanya menggunakan API berkaitan Kanvas yang disediakan oleh applet WeChat (https://developers. weixin .qq.com/miniprogram/dev/api/canvas/wx.createOffscreenCanvas.html)

Penerangan pembolehubah:

hotArr:[{name:'Year of Bingkai Foto Harimau ',kunci:'hunian'},{nama:'topi kepala harimau',kunci:'shendan'},{nama:'bendera negara',kunci:'guoqing'}],

curHot: used Menyimpan indeks hotArr yang dipilih pada masa ini.

WidowWidth: wx.getSystemInfoSync().windowWidth

saiz: 260; //Saiz tersuai

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, () => {
            //圖片繪制成功回調(diào),調(diào)用保存canvas方法
            this.canvasToTempFile();
        })
      })
    },

wx.getImageInfo()

digunakan terutamanya untuk mendapatkan maklumat imej dan mengembalikan laluan setempat imej; Hanya menyokong lukisan imej tempatan.

3.3 Menyimpan imej

Dalam langkah sebelumnya kami telah melukis dua gambar ke atas kanvas, kini kami akan menyimpan kandungan pada kanvas secara setempat.

Menyimpan kandungan pada kanvas ke album tempatan juga dibahagikan kepada dua langkah.

Langkah pertama: Eksport kandungan kawasan tertentu kanvas semasa untuk menjana gambar saiz yang ditentukan.

通過使用 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是因為我們的圖片尺寸設(shè)置的是260
      y: 0,
      height: size,
      width: size,
      canvasId: 'myCanvas',
      success: (res) => {
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success: result => {
            wx.hideLoading();
            wx.showModal({
              content: '圖片已保存到相冊,請前往微信去設(shè)置喲!',
              showCancel: false,
              success: function(res) {
                if (res.confirm) {
                  console.log('用戶點擊確定');
                }
              }
            })
          }, fail(e) {
            wx.hideLoading();
            console.log("err:" + e);
          }
        })
      }
    });
  },

到這里也就實現(xiàn)了基本的頭像框功能。

最后

感興趣的小伙伴可以掃碼體驗：

當(dāng)然了，基于上面的內(nèi)容你也可以制作自己的頭像小程序。

最后 提前恭祝大家春節(jié)快樂，虎年大吉?。?！

【相關(guān)學(xué)習(xí)推薦：小程序開發(fā)教程】

Atas ialah kandungan terperinci Membawa anda langkah demi langkah untuk melaksanakan program kecil untuk membuat bingkai avatar untuk Tahun Harimau (Amalan). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!