Bagaimana untuk menyesuaikan kecantikan dalam vue

Vue ialah rangka kerja JavaScript popular yang digunakan secara meluas dalam pembangunan web. Ia disertakan dengan beberapa alatan berkuasa dan perpustakaan terbina dalam, menjadikannya lebih mudah untuk membuat aplikasi web berprestasi tinggi. Dalam aplikasi web, fungsi kecantikan menjadi semakin popular, dan Vue boleh melaksanakan fungsi ini dengan baik.

Pelaksanaan fungsi kecantikan biasanya memerlukan pemprosesan imej, melaraskan kecerahan, kontras, warna dan parameter lain untuk menghasilkan kesan yang lebih lancar, kaya dan jelas. Terdapat banyak perpustakaan pemprosesan imej yang berkuasa dalam Vue, seperti CamanJS, PICA, LuminanceJS, dll., yang boleh melaksanakan fungsi pengindahan dengan mudah.

Di bawah ini kami akan memperkenalkan cara menggunakan Vue untuk melaksanakan fungsi kecantikan. Kami akan menganggap bahawa kami sudah mempunyai aplikasi Vue asas, yang termasuk templat HTML dan komponen Vue yang berkaitan. Sekarang kita perlu menambah fungsi kecantikan.

Langkah Pertama: Tambah Kawalan Kecantikan

Kami perlu menambah kawalan kecantikan untuk pengguna supaya mereka boleh melaraskan parameter kecantikan dalam aplikasi. Kami akan mencipta komponen Vue berasingan yang akan menjadikan kawalan kecantikan. Kita boleh menggunakan arahan v-model dalam Vue untuk mengikat parameter kecantikan. Contohnya, kod berikut akan mencipta kawalan kecantikan mudah:

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

Kod ini akan mencipta 3 kotak input julat untuk mengawal "Kecerahan", "Kontras" dan "Tepu" masing-masing. Apabila nilai dalam kotak input berubah, arahan model-v mengikat nilai kepada atribut data komponen yang sepadan. Kami akan menggunakan atribut data ini untuk mengubah suai parameter kecantikan imej.

Langkah 2: Gunakan CamnJS untuk memproses imej

Kami memilih CamnJS untuk melaksanakan fungsi pengindahan kerana ia adalah perpustakaan pemprosesan imej yang ringkas dan mudah digunakan. Kita boleh memasang CamnJS menggunakan npm, cuma jalankan arahan berikut dalam terminal:

npm install caman --save

Selepas pemasangan kita perlu menambah kod berikut dalam fail main.js aplikasi Vue untuk menggunakan CamanJS:

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

Vue.prototype.$caman = Caman

Di sini kami menambah objek Caman pada prototaip Vue untuk digunakan dalam komponen. Seterusnya, kita akan menggunakan objek ini semasa mengedit imej.

Langkah 3: Edit imej

Kita perlu menggunakan parameter kecantikan untuk mengedit imej. Cara paling mudah untuk mengedit imej ialah menggunakan fungsi pengeditan CamnJS CamanJS().crop() . Kami akan menggunakan kod berikut untuk menerapkannya pada imej:

import caman from 'caman'

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

Di sini kami mula-mula memilih imej dengan ID "my - image" dan kemudian kami menggunakan fungsi kecerahan, kontras dan ketepuan CamnJS untuk mengeditnya . Kita boleh menggunakan fungsi lain, seperti kecerahan, rona, kecerahan, dsb., untuk mencapai kesan kecantikan yang lebih maju.

Langkah 4: Proses imej dalam Vue

Kini kita perlu menyepadukan CamnJS dengan Vue untuk menyediakan fungsi responsif untuk pengawal kecantikan dalam aplikasi. Untuk melakukan ini, kami akan menambah kod berikut dalam komponen Vue di mana kami mempunyai komponen Vue untuk memaparkan imej:

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

Di sini kami mula-mula menambah elemen img, yang akan digunakan untuk memaparkan imej. Kami juga menambah pengawal pengindahan pada templat supaya pengguna boleh melaraskan parameter pengindahan.

Kami juga mentakrifkan kaedah untuk memproses imej. Kaedah ini menggunakan $refs.image untuk merujuk imej dan kemudian mengeditnya menggunakan CamnJS. Kami menggunakan nilai pengawal kecantikan untuk menyuntik fungsi penyuntingan ke dalam imej dan memaparkan hasilnya pada halaman. Kami menggunakan kaedah setInterval() supaya imej kami dipaparkan dengan segera dan mengemas kini nilai apabila nilai pengawal kecantikan berubah.

Kami menggunakan atribut $parent untuk mengakses atribut data pengawal kecantikan. Sifat ini membolehkan kami membaca semua parameter kecantikan dalam komponen induk Vue, dengan itu merealisasikan pengeditan masa nyata imej oleh pengawal kecantikan.

Langkah 5: Tingkatkan fungsi kecantikan

Kami telah berjaya mencipta pengawal kecantikan dan menyepadukannya dengan logik penyuntingan imej CamnJS dalam komponen Vue. Oleh itu, kita boleh menambah fungsi kecantikan lain seperti yang diperlukan, seperti putaran, pemangkasan, kabur, dll.

Kod berikut menunjukkan cara melaksanakan fungsi pemangkasan dan kabur:

import caman from 'caman'

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

Dalam contoh ini, kami mula-mula memangkas imej menggunakan fungsi crop() CamanJS. Kami menentukan koordinat dan saiz kawasan yang akan dipotong. Kemudian kami menggunakan fungsi stackBlur() CamanJS untuk menambah kesan kabur. Akhir sekali, kami mempersembahkan imej yang telah diedit.

Ringkasan

Di atas adalah keseluruhan proses cara menggunakan Vue untuk melaksanakan fungsi kecantikan. Vue menyediakan alatan dan rangka kerja berkuasa yang menjadikan pembangunan aplikasi web lebih mudah. Menggunakan perpustakaan penyuntingan imej Vue dan CamnJS, kami hanya boleh melaksanakan ciri pengindahan untuk menjadikan aplikasi lebih menarik dan mesra pengguna.

Atas ialah kandungan terperinci Bagaimana untuk menyesuaikan kecantikan dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!