Implémenter des effets de filtre d'image dans les mini-programmes WeChat

Réalisez des effets de filtre d'image dans les mini-programmes WeChat

Avec la popularité des applications de médias sociaux, les gens aiment de plus en plus appliquer des effets de filtre aux photos pour améliorer l'effet artistique et l'attractivité des photos. Les effets de filtre d'image peuvent également être implémentés dans les mini-programmes WeChat, offrant aux utilisateurs des fonctions de retouche photo plus intéressantes et créatives. Cet article expliquera comment implémenter des effets de filtre d'image dans les mini-programmes WeChat et fournira des exemples de code spécifiques.

Tout d'abord, nous devons utiliser le composant canevas dans l'applet WeChat pour charger et éditer des images. Le composant canevas peut dessiner des images sur la page et constitue un élément clé pour obtenir des effets de filtre. Voici un exemple simple de composant canevas :

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

Ensuite, nous devons écrire du code dans le fichier js de l'applet pour charger et éditer des images. Tout d’abord, nous devons obtenir le contexte du composant canevas afin de dessiner des images sur le canevas. Ensuite, nous pouvons utiliser la méthode drawImage de canvas pour charger l’image.

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

Dans le code ci-dessus, nous utilisons la méthode wx.chooseImage pour sélectionner et charger des images. Après avoir sélectionné l'image, nous dessinons l'image sur la toile. La méthode ctx.drawImage accepte le chemin de l'image, la coordonnée x, la coordonnée y ainsi que la largeur et la hauteur de l'image comme paramètres pour déterminer la position et la taille de l'image sur le canevas. Enfin, nous appelons la méthode ctx.draw pour dessiner l'image.

Maintenant, nous pouvons commencer à implémenter l'effet de filtre. L'applet WeChat fournit des effets de filtre pour modifier la couleur des images. Voici quelques exemples d'effets de filtre couramment utilisés :

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

Dans le code ci-dessus, nous appliquons l'effet de filtre en définissant ctx.filter. Le filtre en niveaux de gris peut convertir l'image en une image en niveaux de gris noir et blanc, le filtre sépia peut ajouter un ancien effet de type photo à l'image et le filtre de flou peut rendre l'image floue. Lorsque nous utilisons différents effets de filtre, il suffit de modifier la valeur de ctx.filter.

Enfin, nous pouvons fournir davantage d'options d'effets de filtre en fonction du choix de l'utilisateur. Par exemple, ajoutez une zone de sélection à votre page qui permet aux utilisateurs de choisir parmi différents effets de filtre. Voici un exemple :

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

Dans le fichier js du mini programme, nous avons ajouté la méthode changeFilter pour gérer l'effet de filtre sélectionné par l'utilisateur. Voici un exemple :

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
    // ...
  }
})

Dans le code ci-dessus, nous utilisons un attribut de données pour stocker la liste d'options des effets de filtre et l'index de filtre actuellement sélectionné. Lorsque l'utilisateur sélectionne un effet de filtre différent, la méthode changeFilter est déclenchée, dans laquelle ctx.filter est défini en fonction de la sélection de l'utilisateur et l'image est redessinée.

Grâce aux étapes ci-dessus, nous avons implémenté la fonction d'application d'effets de filtre d'image dans l'applet WeChat. Les utilisateurs peuvent choisir différents effets de filtre pour éditer et embellir les photos, ajoutant ainsi plus de plaisir et de créativité aux mini-programmes WeChat.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!