Comment ajuster le ton et la courbe des images dans Vue ?

Comment ajuster le ton et la courbe des images dans Vue

Dans le développement de Vue, nous devons souvent ajuster le ton et la courbe des images pour obtenir de meilleurs effets visuels. Cet article expliquera comment utiliser Vue et certaines bibliothèques couramment utilisées pour ajuster le ton et la courbe des images, et sera accompagné d'exemples de code.

1. Réglage de la tonalité

Le réglage de la tonalité est obtenu en changeant la couleur de l'image. Dans Vue, nous pouvons utiliser l'attribut de filtre CSS pour ajuster le ton.

Ce qui suit est un exemple simple qui montre comment utiliser Vue et la propriété filter de CSS pour ajuster la teinte de l'image :

<template>
  <div>
    <img :src="imageSrc" alt="Original Image">
    <div>
      <label for="hueRange">Hue</label>
      <input type="range" id="hueRange" v-model="hue" min="-180" max="180">
    </div>
    <img :src="adjustedImageSrc" alt="Adjusted Image">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageSrc: 'original.jpg',
      hue: 0
    }
  },
  computed: {
    adjustedImageSrc() {
      return `adjusted.jpg?hue=${this.hue}`;
    }
  }
}
</script>

<style>
img {
  display: block;
  max-width: 100%;
  margin-bottom: 20px;
}

input {
  width: 200px;
}
</style>

Dans le code ci-dessus, nous lions la teinte à l'élément d'entrée range en utilisant le v-model directive, cela permet de faire glisser le curseur pour modifier la valeur de teinte en temps réel. Ensuite, via l'attribut calculé, nous insérons cette valeur dans le chemin de l'image ajusté.

2. Réglage de la courbe

Le réglage de la courbe est obtenu en modifiant la luminosité, le contraste, la saturation et d'autres paramètres de l'image. Dans Vue, nous pouvons utiliser certaines bibliothèques de traitement d'images JavaScript, telles que CamanJS ou pica, pour effectuer des ajustements de courbes.

Ce qui suit est un exemple utilisant la bibliothèque CamanJS, montrant comment utiliser Vue et CamanJS pour ajuster la courbe de l'image :

<template>
  <div>
    <img :src="imageSrc" alt="Original Image">
    <div>
      <label for="brightnessRange">Brightness</label>
      <input type="range" id="brightnessRange" v-model="brightness" min="-100" max="100">
    </div>
    <div>
      <label for="contrastRange">Contrast</label>
      <input type="range" id="contrastRange" v-model="contrast" min="-100" max="100">
    </div>
    <div>
      <label for="saturationRange">Saturation</label>
      <input type="range" id="saturationRange" v-model="saturation" min="-100" max="100">
    </div>
    <img :src="adjustedImageSrc" alt="Adjusted Image">
  </div>
</template>

<script>
import Caman from 'caman';

export default {
  data() {
    return {
      imageSrc: 'original.jpg',
      brightness: 0,
      contrast: 0,
      saturation: 0,
    }
  },
  computed: {
    adjustedImageSrc() {
      const image = new Image();
      image.src = this.imageSrc;
      const canvas = document.createElement('canvas');
      const context = canvas.getContext('2d');
      context.drawImage(image, 0, 0, image.width, image.height);
      Caman(canvas, function () {
        this.brightness(this.brightness);
        this.contrast(this.contrast);
        this.saturation(this.saturation);
        this.render();
      });
      return canvas.toDataURL();
    }
  }
}
</script>

<style>
img {
  display: block;
  max-width: 100%;
  margin-bottom: 20px;
}

input {
  width: 200px;
}
</style>

Dans le code ci-dessus, nous lions la luminosité, le contraste et la saturation à l'élément d'entrée de plage en utilisant le Directive v-model Certainement. Ensuite, dans l'attribut calculé, nous dessinons d'abord l'image originale sur le canevas, puis utilisons CamanJS pour effectuer un ajustement de courbe, et enfin convertissons l'image ajustée en une URL de données et la renvoyons.

Résumé :

En utilisant Vue et certaines bibliothèques de traitement d'image, nous pouvons facilement ajuster le ton et la courbe de l'image. Dans l'exemple de code ci-dessus, en ajustant la valeur du curseur, les effets de tonalité et de courbe de l'image peuvent être modifiés en temps réel. Les développeurs peuvent personnaliser les paramètres de filtre en fonction des besoins pour obtenir des effets plus cool.

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!