Comment ajuster la beauté en vue

Vue est un framework JavaScript populaire largement utilisé dans le développement Web. Il est livré avec des outils et bibliothèques puissants intégrés, facilitant la création d'applications Web hautes performances. Dans les applications Web, les fonctions de beauté deviennent de plus en plus populaires et Vue peut très bien implémenter cette fonction.

La mise en œuvre de la fonction beauté nécessite généralement un traitement d'image, un réglage de la luminosité, du contraste, de la couleur et d'autres paramètres pour produire des effets plus fluides, plus riches et plus clairs. Il existe de nombreuses bibliothèques puissantes de traitement d'images dans Vue, telles que CamanJS, PICA, LuminanceJS, etc., qui peuvent facilement implémenter des fonctions d'embellissement.

Ci-dessous, nous expliquerons comment utiliser Vue pour implémenter la fonction beauté. Nous supposerons que nous disposons déjà d'une application Vue de base, qui comprend un modèle HTML et les composants Vue associés. Nous devons maintenant ajouter des fonctionnalités de beauté.

Première étape : ajouter un contrôle de beauté

Nous devons ajouter un contrôle de beauté pour les utilisateurs afin qu'ils puissent ajuster les paramètres de beauté dans l'application. Nous allons créer un composant Vue distinct qui rendra le contrôle de beauté. Nous pouvons utiliser la directive v-model dans Vue pour lier les paramètres de beauté. Par exemple, le code suivant créera un contrôle de beauté simple :

<template>
  <div>
    <label for="brightness">亮度：</label>
    <input type="range" min="-100" max="100" v-model="brightness" id="brightness">
    <br>
    <label for="contrast">对比度：</label>
    <input type="range" min="-100" max="100" v-model="contrast" id="contrast">
    <br>
    <label for="saturation">饱和度：</label>
    <input type="range" min="-100" max="100" v-model="saturation" id="saturation">
  </div>
</template>
<script>
export default {
  data() {
    return {
      brightness: 0,
      contrast: 0,
      saturation: 0
    }
  }
}
</script>

Ce code créera 3 zones de saisie de plage pour contrôler respectivement "Luminosité", "Contraste" et "Saturation". Lorsque la valeur dans la zone de saisie change, la directive v-model lie la valeur à l'attribut de données du composant correspondant. Nous utiliserons ces attributs de données pour modifier les paramètres de beauté de l'image.

Étape 2 : Utilisez CamnJS pour traiter les images

Nous choisissons CamnJS pour implémenter la fonction d'embellissement car il s'agit d'une bibliothèque de traitement d'images simple et facile à utiliser. Nous pouvons installer CamnJS en utilisant npm, exécutez simplement la commande suivante dans le terminal :

npm install caman --save

Après l'installation, nous devons ajouter le code suivant dans le fichier main.js de l'application Vue pour utiliser CamanJS :

import Vue from 'vue'
import Caman from 'caman'

Vue.prototype.$caman = Caman

Ici, nous ajoutons le Caman objet au prototype Vue pour une utilisation dans les composants. Ensuite, nous utiliserons cet objet lors de l'édition de l'image.

Étape 3 : Modifier l'image

Nous devons utiliser les paramètres de beauté pour modifier l'image. Le moyen le plus simple de modifier une image est d'utiliser la fonction d'édition de CamnJS, CamanJS().crop() . Nous utiliserons le code suivant pour l'appliquer à l'image :

import caman from 'caman'

caman('#my-image', function() {
  this.brightness(10);
  this.contrast(-5);
  this.saturation(20);
  this.render();
});

Ici, nous avons d'abord choisi une image avec l'ID "my - image", puis nous avons utilisé les fonctions de luminosité, de contraste et de saturation de CamnJS pour la modifier. Nous pouvons utiliser d'autres fonctions, telles que la luminosité, la teinte, la vivacité, etc., pour obtenir des effets de beauté plus avancés.

Étape 4 : Traiter l'image dans Vue

Nous devons maintenant intégrer CamnJS à Vue pour configurer une fonctionnalité réactive pour le contrôleur de beauté dans l'application. Pour ce faire, nous allons ajouter le code suivant dans le composant Vue où nous avons une image de rendu :

<template>
  <div>
    <img :src="imageUrl" alt="my-image" id="my-image" ref="image">
    <beauty-controls></beauty-controls>
  </div>
</template>
<script>
import BeautyControls from './BeautyControls.vue'

export default {
  components: {BeautyControls},
  data() {
    return {
      imageUrl: 'https://picsum.photos/500/500'
    }
  },
  methods: {
    processImage() {
      const image = this.$refs.image;

      this.$caman(image, function() {
        this.revert(false); // 将图像重置为原始状态
        this.brightness(this.$parent.brightness);
        this.contrast(this.$parent.contrast);
        this.saturation(this.$parent.saturation);
        this.render();

      });
    }
  },
  mounted () {
    this.processImage();
    setInterval(this.processImage, 500);
  }
}
</script>

Ici, nous ajoutons d'abord un élément img, qui est utilisé pour rendre l'image. Nous avons également ajouté des contrôleurs d'embellissement au modèle afin que les utilisateurs puissent ajuster les paramètres d'embellissement.

Nous définissons également une méthode de traitement des images. Cette méthode utilise $refs.image pour référencer l'image, puis la modifie à l'aide de CamnJS. Nous utilisons la valeur du contrôleur de beauté pour injecter la fonction d'édition dans l'image et restituer le résultat sur la page. Nous utilisons la méthode setInterval() pour que notre image s'affiche immédiatement et mette à jour la valeur lorsque la valeur du contrôleur de beauté change.

Nous utilisons l'attribut $parent pour accéder aux attributs des données du contrôleur de beauté. Cette propriété nous permet de lire tous les paramètres de beauté dans le composant parent Vue, réalisant ainsi l'édition des images en temps réel par le contrôleur de beauté.

Étape 5 : Améliorer la fonction beauté

Nous avons créé avec succès le contrôleur de beauté et l'avons intégré à la logique d'édition d'image CamnJS dans le composant Vue. Par conséquent, nous pouvons ajouter d’autres fonctions de beauté selon les besoins, comme la rotation, le recadrage, le flou, etc.

Le code suivant montre comment implémenter la fonctionnalité de recadrage et de flou :

import caman from 'caman'

this.$caman('#my-image', function() {
  // 剪裁图像
  this.crop(100, 100, 300, 300);
  // 模糊图像
  this.stackBlur(5);
  this.render();
});

Dans cet exemple, nous recadrons d'abord l'image à l'aide de la fonction crop() de CamanJS. Nous précisons les coordonnées et la taille de la zone à découper. Ensuite, nous utilisons la fonction stackBlur() de CamanJS pour ajouter un effet de flou. Enfin, nous présentons l’image éditée.

Résumé

Ce qui précède est l'ensemble du processus d'utilisation de Vue pour implémenter la fonction beauté. Vue fournit des outils et des frameworks puissants qui facilitent le développement d'applications Web. En utilisant la bibliothèque d'édition d'images Vue et CamnJS, nous pouvons simplement implémenter des fonctionnalités d'embellissement pour rendre l'application plus attrayante et conviviale.

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!