Wie passt man den Ton und die Kurve von Bildern in Vue an?

So passen Sie den Ton und die Krümmung von Bildern in Vue an

Bei der Vue-Entwicklung müssen wir häufig den Ton und die Krümmung von Bildern anpassen, um bessere visuelle Effekte zu erzielen. In diesem Artikel wird erläutert, wie Sie Vue und einige häufig verwendete Bibliotheken verwenden, um den Ton und die Kurve von Bildern anzupassen, und es werden Codebeispiele bereitgestellt.

1. Tonanpassung

Die Tonanpassung erfolgt durch Ändern der Bildfarbe. In Vue können wir das CSS-Filterattribut verwenden, um den Ton anzupassen.

Das Folgende ist ein einfaches Beispiel, das zeigt, wie man Vue und die Filtereigenschaft von CSS verwendet, um den Farbton des Bildes anzupassen:

<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>

Im obigen Code binden wir den Farbton mithilfe des V-Modells an das Bereichseingabeelement Direktive. Dies ermöglicht das Verschieben des Schiebereglers, um den Farbtonwert in Echtzeit zu ändern. Anschließend fügen wir diesen Wert über das berechnete Attribut in den angepassten Bildpfad ein.

2. Kurvenanpassung

Die Kurvenanpassung erfolgt durch Ändern der Helligkeit, des Kontrasts, der Sättigung und anderer Parameter des Bildes. In Vue können wir einige JavaScript-Bildverarbeitungsbibliotheken wie CamanJS oder Pica verwenden, um Kurvenanpassungen durchzuführen.

Das Folgende ist ein Beispiel mit der CamanJS-Bibliothek, das zeigt, wie Vue und CamanJS zum Anpassen der Bildkurve verwendet werden:

<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>

Im obigen Code binden wir Helligkeit, Kontrast und Sättigung an das Bereichseingabeelement, indem wir verwenden V-Modell-Direktive Sicherlich. Dann zeichnen wir in der berechneten Eigenschaft zunächst das Originalbild auf die Leinwand, führen dann mit CamanJS eine Kurvenanpassung durch und konvertieren schließlich das angepasste Bild in eine Daten-URL und geben es zurück.

Zusammenfassung:

Durch die Verwendung von Vue und einigen Bildverarbeitungsbibliotheken können wir den Ton und die Kurve des Bildes einfach anpassen. Im obigen Codebeispiel können durch Anpassen des Schiebereglerwerts die Ton- und Kurveneffekte des Bildes in Echtzeit geändert werden. Entwickler können Filterparameter je nach Bedarf anpassen, um kühlere Effekte zu erzielen.

Das obige ist der detaillierte Inhalt vonWie passt man den Ton und die Kurve von Bildern in Vue an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!