Vue et Canvas : Comment implémenter les fonctions d'embellissement de l'image et de resurfaçage de la peau-Voir.js-php.cn

Vue et Canvas : Comment implémenter des fonctions d'embellissement et de lissage de la peau sur les images

Ces dernières années, les fonctions d'embellissement et de lissage de la peau sont devenues des fonctionnalités standard dans de nombreuses applications d'appareil photo de téléphone portable. Ces fonctions rendent non seulement les utilisateurs plus confiants lorsqu'ils prennent des photos de selfie, mais améliorent également dans une certaine mesure la qualité des images. Cet article expliquera comment utiliser la technologie Vue et Canvas pour réaliser les fonctions d'embellissement et de resurfaçage de la peau des images.

1. Comprendre Vue et Canvas

Une brève introduction à Vue et Canvas. Vue est un framework progressif pour la création d'interfaces utilisateur qui restitue les données dans des vues DOM et met à jour la vue en temps réel lorsque les données changent. Canvas est une balise de dessin récemment ajoutée en HTML5, qui peut être utilisée pour dessiner des graphiques, des animations, etc.

2. Préparation

Avant de commencer la mise en œuvre, nous devons préparer quelques travaux de base.

Créez un projet Vue et introduisez le composant Canvas :

Entrez la commande suivante sur la ligne de commande pour créer un projet Vue :

vue create beautify-app

Copier après la connexion

Ensuite, créez un composant nommé Canvas.vue dans le répertoire src/components, en indiquant que nous allons Ce composant implémente les fonctions de Canvas.

Ajouter une fonction de téléchargement d'images :

Ajoutez une balise d'entrée dans Canvas.vue pour recevoir les fichiers image téléchargés par les utilisateurs.

<template>
  <div>
    <input type="file" @change="handleImageUpload" />
  </div>
</template>

Copier après la connexion

3. Implémentez la fonction d'embellissement

Ensuite, nous implémenterons la fonction d'embellissement de l'image. Tout d’abord, nous devons introduire une image filtrante pour la beauté dans Canvas.vue.

Ajouter une image filtre :

Ajoutez une image nommée beauty.png dans le répertoire des actifs, qui est utilisée comme filtre de beauté.

Dessinez l'image :

Dans la fonction de crochet monté, nous dessinons l'image téléchargée sur la toile.

mounted() {
  this.canvas = this.$refs.canvas;
  this.context = this.canvas.getContext('2d');
  const image = new Image();
  image.src = this.imageUrl;
  image.onload = () => {
    this.context.drawImage(image, 0, 0, this.canvas.width, this.canvas.height);
  };
},

Copier après la connexion

Appliquer le filtre :

Après avoir dessiné l'image, nous utilisons la méthode getImageData et la méthode putImageData de Canvas pour appliquer l'image filtrée à l'image téléchargée. getImageData方法和putImageData方法将滤镜图片应用于上传的图片上。

applyFilter() {
  const filterImage = new Image();
  filterImage.src = '@/assets/beautify.png';
  filterImage.onload = () => {
    const imageData = this.context.getImageData(0, 0, this.canvas.width, this.canvas.height);
    const filterContext = this.createFilterContext(filterImage, imageData);
    this.context.putImageData(filterContext, 0, 0);
  };
},

Copier après la connexion

其中，createFilterContext方法用来创建滤镜效果的上下文，并将其返回。

四、实现磨皮功能

接下来，我们将实现磨皮功能。磨皮功能的实现主要依赖于Canvas的像素处理方法。

获取像素数据：

我们可以使用Canvas的getImageData方法获取图片的像素数据。

const imageData = this.context.getImageData(0, 0, this.canvas.width, this.canvas.height);
const data = imageData.data;

Copier après la connexion

处理像素数据：

我们可以通过遍历像素数据，对每个像素进行处理。在这里，我们可以使用高斯模糊算法对像素进行模糊处理。

for (let i = 0, len = data.length; i < len; i += 4) {
  const red = data[i];
  const green = data[i + 1];
  const blue = data[i + 2];
  const alpha = data[i + 3];
  
  // 磨皮处理
  // ...
}

Copier après la connexion

绘制像素数据：

最后，我们使用putImageData方法将处理后的像素数据绘制到Canvas上。

const resultImageData = new ImageData(data, imageData.width, imageData.height);
this.context.putImageData(resultImageData, 0, 0);

Copier après la connexion

五、完善功能

完成上述步骤后，我们可以通过调用方法来实现图片的美颜和磨皮功能。

上传图片：

在handleImageUpload方法中，我们使用URL.createObjectURL方法生成一个指向用户上传图片的URL。

handleImageUpload(event) {
  const file = event.target.files[0];
  this.imageUrl = URL.createObjectURL(file);
},

Copier après la connexion

应用滤镜和磨皮：

在按钮的点击事件中，我们分别调用applyFilter方法和applySmoothing

<button @click="applyFilter">应用滤镜</button>
<button @click="applySmoothing">应用磨皮</button>

Copier après la connexion

Parmi elles, la méthode createFilterContext est utilisée pour créer le contexte de l'effet de filtre et le renvoyer.

4. Réaliser la fonction dermabrasion

Ensuite, nous réaliserons la fonction dermabrasion. La réalisation de la fonction de resurfaçage de la peau repose principalement sur la méthode de traitement des pixels de Canvas.

Obtenir les données en pixels :

Nous pouvons utiliser la méthode getImageData de Canvas pour obtenir les données en pixels de l'image. 🎜

<template>
  <div>
    <input type="file" @change="handleImageUpload" />
    <button @click="applyFilter">应用滤镜</button>
    <button @click="applySmoothing">应用磨皮</button>

    <canvas ref="canvas" :width="canvasWidth" :height="canvasHeight"></canvas>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: '',
      canvas: null,
      context: null,
      canvasWidth: 400,
      canvasHeight: 300,
    };
  },
  mounted() {
    this.canvas = this.$refs.canvas;
    this.context = this.canvas.getContext('2d');
  },
  methods: {
    handleImageUpload(event) {
      const file = event.target.files[0];
      this.imageUrl = URL.createObjectURL(file);
      const image = new Image();
      image.src = this.imageUrl;
      image.onload = () => {
        this.context.drawImage(image, 0, 0, this.canvas.width, this.canvas.height);
      };
    },
    applyFilter() {
      const filterImage = new Image();
      filterImage.src = '@/assets/beautify.png';
      filterImage.onload = () => {
        const imageData = this.context.getImageData(0, 0, this.canvas.width, this.canvas.height);
        const filterContext = this.createFilterContext(filterImage, imageData);
        this.context.putImageData(filterContext, 0, 0);
      };
    },
    applySmoothing() {
      const imageData = this.context.getImageData(0, 0, this.canvas.width, this.canvas.height);
      const data = imageData.data;
      for (let i = 0, len = data.length; i < len; i += 4) {
        const red = data[i];
        const green = data[i + 1];
        const blue = data[i + 2];
        const alpha = data[i + 3];

        // 磨皮处理
        // ...

      }

      const resultImageData = new ImageData(data, imageData.width, imageData.height);
      this.context.putImageData(resultImageData, 0, 0);
    },
    createFilterContext(filterImage, imageData) {
      const filterCanvas = document.createElement('canvas');
      filterCanvas.width = this.canvas.width;
      filterCanvas.height = this.canvas.height;
      const filterContext = filterCanvas.getContext('2d');

      const pattern = filterContext.createPattern(filterImage, 'repeat');
      filterContext.fillStyle = pattern;
      filterContext.fillRect(0, 0, filterCanvas.width, filterCanvas.height);

      const filterImageData = filterContext.getImageData(0, 0, filterCanvas.width, filterCanvas.height);
      const filterData = filterImageData.data;
      const data = imageData.data;

      for (let i = 0, len = data.length; i < len; i += 4) {
        data[i] = data[i] * filterData[i] / 255;
        data[i + 1] = data[i + 1] * filterData[i + 1] / 255;
        data[i + 2] = data[i + 2] * filterData[i + 2] / 255;
      }

      return imageData;
    },
  },
};
</script>

Copier après la connexion

🎜🎜Traitement des données de pixels :🎜🎜🎜Nous pouvons traiter chaque pixel en parcourant les données de pixels. Ici, nous pouvons flouter les pixels en utilisant l'algorithme de flou gaussien. 🎜rrreee🎜🎜Dessiner des données de pixels : 🎜🎜🎜Enfin, nous utilisons la méthode putImageData pour dessiner les données de pixels traitées sur le canevas. 🎜rrreee🎜 5. Améliorer les fonctions 🎜🎜Après avoir terminé les étapes ci-dessus, nous pouvons réaliser les fonctions d'embellissement et de resurfaçage de la peau de l'image en appelant des méthodes. 🎜🎜🎜Télécharger des images : 🎜🎜🎜Dans la méthode handleImageUpload, nous utilisons la méthode URL.createObjectURL pour générer une URL pointant vers l'image téléchargée par l'utilisateur. 🎜rrreee🎜🎜Appliquer les filtres et le lissage : 🎜🎜🎜En cas de clic du bouton, nous appelons respectivement la méthode applyFilter et la méthode applySmoothing pour appliquer le filtre et le lissage . 🎜rrreee🎜 6. Résumé🎜🎜Grâce à la combinaison de Vue et Canvas, nous pouvons facilement réaliser les fonctions d'embellissement et de resurfaçage de la peau des images. En traitant les pixels du Canvas, nous pouvons développer différents algorithmes d'embellissement en fonction des besoins pour offrir une meilleure expérience utilisateur. 🎜🎜Ce qui suit est un exemple complet de code Canvas.vue : 🎜rrreee🎜Dans cet exemple, nous implémentons les fonctions d'embellissement et de lissage de la peau de l'image en dessinant l'image téléchargée et en appliquant des filtres et un lissage de la peau. En utilisant de manière flexible les API de Vue et Canvas, nous pouvons personnaliser différents algorithmes de beauté en fonction des besoins et offrir une meilleure expérience utilisateur. 🎜🎜J'espère que cet article pourra vous aider à comprendre comment utiliser Vue et Canvas pour mettre en œuvre les fonctions d'embellissement et de lissage de la peau des images. Bonne programmation ! 🎜

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!