So passen Sie die Schönheit in Vue an

Vue ist ein beliebtes JavaScript-Framework, das häufig in der Webentwicklung verwendet wird. Es verfügt über einige integrierte leistungsstarke Tools und Bibliotheken, die die Erstellung leistungsstarker Webanwendungen erleichtern. In Webanwendungen erfreuen sich Beauty-Funktionen immer größerer Beliebtheit und Vue kann diese Funktion gut umsetzen.

Die Implementierung der Schönheitsfunktion erfordert normalerweise eine Bildverarbeitung, bei der Helligkeit, Kontrast, Farbe und andere Parameter angepasst werden, um glattere, sattere und klarere Effekte zu erzielen. In Vue gibt es viele leistungsstarke Bildverarbeitungsbibliotheken wie CamanJS, PICA, LuminanceJS usw., mit denen Verschönerungsfunktionen problemlos implementiert werden können.

Im Folgenden stellen wir vor, wie Sie mit Vue die Beauty-Funktion implementieren. Wir gehen davon aus, dass wir bereits über eine grundlegende Vue-Anwendung verfügen, die eine HTML-Vorlage und zugehörige Vue-Komponenten enthält. Jetzt müssen wir Schönheitsfunktionen hinzufügen.

Schritt eins: Schönheitssteuerung hinzufügen

Wir müssen eine Schönheitssteuerung für Benutzer hinzufügen, damit sie die Schönheitsparameter in der Anwendung anpassen können. Wir werden eine separate Vue-Komponente erstellen, die die Schönheitskontrolle rendert. Wir können die V-Model-Direktive in Vue verwenden, um Schönheitsparameter zu binden. Der folgende Code erstellt beispielsweise eine einfache Schönheitssteuerung:

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

Dieser Code erstellt drei Bereichseingabefelder zur Steuerung von „Helligkeit“, „Kontrast“ und „Sättigung“. Wenn sich der Wert im Eingabefeld ändert, bindet die V-Model-Direktive den Wert an das entsprechende Komponentendatenattribut. Wir werden diese Datenattribute verwenden, um die Schönheitsparameter des Bildes zu ändern.

Schritt 2: Verwenden Sie CamnJS zum Verarbeiten von Bildern

Wir wählen CamnJS zur Implementierung der Verschönerungsfunktion, da es sich um eine einfache und benutzerfreundliche Bildverarbeitungsbibliothek handelt. Wir können CamnJS mit npm installieren. Führen Sie einfach den folgenden Befehl im Terminal aus:

npm install caman --save

Nach der Installation müssen wir den folgenden Code in die main.js-Datei der Vue-Anwendung hinzufügen, um CamanJS zu verwenden:

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

Vue.prototype.$caman = Caman

Hier fügen wir den Caman hinzu Objekt zum Vue-Prototyp zur Verwendung in Komponenten. Als nächstes verwenden wir dieses Objekt beim Bearbeiten des Bildes.

Schritt 3: Bearbeiten Sie das Bild

Wir müssen Schönheitsparameter verwenden, um das Bild zu bearbeiten. Der einfachste Weg, ein Bild zu bearbeiten, ist die Verwendung der Bearbeitungsfunktion CamnJS().crop() . Wir werden den folgenden Code verwenden, um ihn auf das Bild anzuwenden:

import caman from 'caman'

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

Hier haben wir zuerst ein Bild mit der ID „mein - Bild“ ausgewählt und dann die Helligkeits-, Kontrast- und Sättigungsfunktionen von CamnJS verwendet, um es zu bearbeiten. Wir können andere Funktionen wie Helligkeit, Farbton, Lebendigkeit usw. verwenden, um erweiterte Schönheitseffekte zu erzielen.

Schritt 4: Verarbeiten Sie das Bild in Vue

Jetzt müssen wir CamnJS mit Vue integrieren, um reaktionsfähige Funktionen für den Beauty-Controller in der Anwendung einzurichten. Dazu fügen wir den folgenden Code in die Vue-Komponente ein, in der wir ein Rendering-Bild haben:

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

Hier fügen wir zunächst ein img-Element hinzu, das zum Rendern des Bildes verwendet wird. Wir haben der Vorlage auch Verschönerungscontroller hinzugefügt, damit Benutzer Verschönerungsparameter anpassen können.

Wir definieren auch eine Methode zur Bildverarbeitung. Diese Methode verwendet $refs.image, um auf das Bild zu verweisen und es dann mit CamnJS zu bearbeiten. Wir verwenden den Wert des Beauty-Controllers, um die Bearbeitungsfunktion in das Bild einzufügen und das Ergebnis auf der Seite darzustellen. Wir verwenden die Methode setInterval(), damit unser Bild sofort gerendert wird und der Wert aktualisiert wird, wenn sich der Wert des Beauty-Controllers ändert.

Wir verwenden das Attribut $parent, um auf die Datenattribute des Beauty-Controllers zuzugreifen. Diese Eigenschaft ermöglicht es uns, alle Beauty-Parameter in der übergeordneten Vue-Komponente auszulesen und so die Echtzeitbearbeitung von Bildern durch den Beauty-Controller zu ermöglichen.

Schritt 5: Verbessern Sie die Beauty-Funktion

Wir haben den Beauty-Controller erfolgreich erstellt und ihn mit der CamnJS-Bildbearbeitungslogik in die Vue-Komponente integriert. Daher können wir bei Bedarf weitere Beauty-Funktionen hinzufügen, z. B. Drehen, Zuschneiden, Unschärfe usw.

Der folgende Code zeigt, wie die Funktion zum Zuschneiden und Weichzeichnen implementiert wird:

import caman from 'caman'

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

In diesem Beispiel schneiden wir das Bild zunächst mit der Funktion „crop()“ von CamanJS zu. Wir geben die Koordinaten und die Größe des zu beschneidenden Bereichs an. Dann verwenden wir die Funktion stackBlur() von CamanJS, um einen Unschärfeeffekt hinzuzufügen. Abschließend präsentieren wir das bearbeitete Bild.

Zusammenfassung

Das Obige ist der gesamte Prozess, wie Vue zur Implementierung der Schönheitsfunktion verwendet wird. Vue bietet leistungsstarke Tools und Frameworks, die die Entwicklung von Webanwendungen erleichtern. Mit der Bildbearbeitungsbibliothek Vue und CamnJS können wir einfach Verschönerungsfunktionen implementieren, um die Anwendung attraktiver und benutzerfreundlicher zu machen.

Das obige ist der detaillierte Inhalt vonSo passen Sie die Schönheit in Vue an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!