Membawa anda langkah demi langkah untuk melaksanakan program kecil untuk membuat bingkai avatar untuk Tahun Harimau (Amalan)

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获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
    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
            })
          }
        });
    },

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, () => {
            //图片绘制成功回调,调用保存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是因为我们的图片尺寸设置的是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);
          }
        })
      }
    });
  },

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

最后

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

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

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

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

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!