Laksanakan kesan penapis imej dalam program mini WeChat

Realisasikan kesan penapis gambar dalam program mini WeChat

Dengan populariti aplikasi media sosial, orang ramai semakin gemar menggunakan kesan penapis pada foto untuk meningkatkan kesan artistik dan daya tarikan foto. Kesan penapis gambar juga boleh dilaksanakan dalam program mini WeChat, menyediakan pengguna dengan fungsi penyuntingan foto yang lebih menarik dan kreatif. Artikel ini akan memperkenalkan cara untuk melaksanakan kesan penapis imej dalam program mini WeChat dan memberikan contoh kod khusus.

Pertama, kita perlu menggunakan komponen kanvas dalam applet WeChat untuk memuatkan dan mengedit imej. Komponen kanvas boleh melukis imej pada halaman dan merupakan elemen utama untuk mencapai kesan penapis. Berikut ialah contoh komponen kanvas mudah:

<canvas canvas-id="myCanvas" style="width: 100%; height: 100%;"></canvas>

Seterusnya, kita perlu menulis kod dalam fail js applet untuk memuatkan dan mengedit imej. Pertama, kita perlu mendapatkan konteks komponen kanvas untuk melukis imej pada kanvas. Kemudian, kita boleh menggunakan kaedah drawImage kanvas untuk memuatkan imej.

Page({
  onLoad: function() {
    var ctx = wx.createCanvasContext('myCanvas')

    wx.chooseImage({
      success: function(res) {
        var tempFilePaths = res.tempFilePaths

        ctx.drawImage(tempFilePaths[0], 0, 0, 300, 300)
        ctx.draw()
      }
    })
  }
})

Dalam kod di atas, kami menggunakan kaedah wx.chooseImage untuk memilih dan memuatkan imej. Selepas memilih imej, kami melukis imej pada kanvas. Kaedah ctx.drawImage menerima laluan imej, koordinat x, koordinat y, dan lebar dan ketinggian imej sebagai parameter untuk menentukan kedudukan dan saiz imej pada kanvas. Akhir sekali, kami memanggil kaedah ctx.draw untuk melukis gambar.

Kini, kita boleh mula melaksanakan kesan penapis. Applet WeChat menyediakan beberapa kesan penapis untuk mengubah suai warna imej. Berikut ialah beberapa contoh kesan penapis yang biasa digunakan:

Page({
  onLoad: function() {
    var ctx = wx.createCanvasContext('myCanvas')

    wx.chooseImage({
      success: function(res) {
        var tempFilePaths = res.tempFilePaths

        ctx.drawImage(tempFilePaths[0], 0, 0, 300, 300)

        // 应用滤镜效果
        ctx.filter = 'grayscale(100%)' // 灰度滤镜
        ctx.filter = 'sepia(100%)' // 褐色滤镜
        ctx.filter = 'blur(5px)' // 模糊滤镜

        // 绘制滤镜后的图像
        ctx.drawImage(tempFilePaths[0], 0, 0, 300, 300)

        ctx.draw()
      }
    })
  }
})

Dalam kod di atas, kami menggunakan kesan penapis dengan menetapkan ctx.filter. Penapis skala kelabu boleh menukar imej kepada imej skala kelabu hitam dan putih, penapis sepia boleh menambah kesan seperti foto lama pada imej, dan penapis kabur boleh mengaburkan imej. Apabila kita menggunakan kesan penapis yang berbeza, kita hanya perlu menukar nilai ctx.filter.

Akhir sekali, kami boleh menyediakan lebih banyak pilihan kesan penapis berdasarkan pilihan pengguna. Contohnya, tambahkan kotak pilihan pada halaman anda yang membolehkan pengguna memilih daripada kesan penapis yang berbeza. Berikut ialah contoh:

  <canvas canvas-id="myCanvas" style="width: 100%; height: 100%;"></canvas>
  选择滤镜

Dalam fail js program mini, kami menambah kaedah changeFilter untuk mengendalikan kesan penapis yang dipilih oleh pengguna. Berikut ialah contoh:

Page({
  data: {
    filterList: ['无', '灰度', '褐色', '模糊'],
    currentFilterIndex: 0
  },

  onLoad: function() {
    // ...
  },

  changeFilter: function(e) {
    var index = e.detail.value

    var filter = ''

    switch (index) {
      case '1':
        filter = 'grayscale(100%)'
        break
      case '2':
        filter = 'sepia(100%)'
        break
      case '3':
        filter = 'blur(5px)'
        break
      default:
        filter = ''
    }

    var ctx = wx.createCanvasContext('myCanvas')
    // ...

    ctx.filter = filter
    // ...
  }
})

Dalam kod di atas, kami menggunakan atribut data untuk menyimpan senarai pilihan kesan penapis dan indeks penapis yang dipilih pada masa ini. Apabila pengguna memilih kesan penapis yang berbeza, kaedah changeFilter dicetuskan, di mana ctx.filter ditetapkan mengikut pilihan pengguna dan imej dilukis semula.

Melalui langkah di atas, kami telah melaksanakan fungsi menerapkan kesan penapis gambar dalam applet WeChat. Pengguna boleh memilih kesan penapis yang berbeza untuk mengedit dan mencantikkan foto, menambahkan lagi keseronokan dan kreativiti pada applet WeChat.

Atas ialah kandungan terperinci Laksanakan kesan penapis imej dalam program mini WeChat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!