Bagaimana untuk melaraskan nada dan lengkung gambar dalam Vue?

Cara melaraskan nada dan lengkung gambar dalam Vue

Dalam pembangunan Vue, kita selalunya perlu melaraskan nada dan lengkung gambar untuk mencapai kesan visual yang lebih baik. Artikel ini akan memperkenalkan cara menggunakan Vue dan beberapa perpustakaan yang biasa digunakan untuk melaraskan nada dan lengkung gambar, serta disertakan dengan contoh kod.

1. Pelarasan nada

Pelarasan nada dicapai dengan menukar warna gambar. Dalam Vue, kita boleh menggunakan atribut penapis CSS untuk melaraskan nada.

Berikut ialah contoh mudah yang menunjukkan cara menggunakan Vue dan sifat penapis CSS untuk melaraskan rona imej:

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

Dalam kod di atas, kami mengikat rona pada elemen input julat dengan menggunakan model v arahan, Ini membolehkan gelongsor gelangsar untuk menukar nilai warna dalam masa nyata. Kemudian, melalui atribut yang dikira, kami menggabungkan nilai ini ke dalam laluan imej yang dilaraskan.

2. Pelarasan lengkung

Pelarasan lengkung dicapai dengan menukar kecerahan, kontras, ketepuan dan parameter lain gambar. Dalam Vue, kami boleh menggunakan beberapa perpustakaan pemprosesan imej JavaScript, seperti CamanJS atau pica, untuk melakukan pelarasan lengkung.

Berikut ialah contoh menggunakan perpustakaan CamanJS, menunjukkan cara menggunakan Vue dan CamanJS untuk melaraskan lengkung imej:

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

Dalam kod di atas, kami mengikat kecerahan, kontras dan ketepuan pada elemen input julat dengan menggunakan arahan v-model Sudah tentu. Kemudian, dalam atribut yang dikira, kami mula-mula melukis imej asal pada kanvas, kemudian menggunakan CamanJS untuk melakukan pelarasan lengkung, dan akhirnya menukar imej yang dilaraskan kepada URL Data dan mengembalikannya.

Ringkasan:

Dengan menggunakan Vue dan beberapa perpustakaan pemprosesan imej, kami boleh melaraskan nada dan lengkung gambar dengan mudah. Dalam contoh kod di atas, dengan melaraskan nilai peluncur, kesan nada dan lengkung imej boleh ditukar dalam masa nyata. Pembangun boleh menyesuaikan parameter penapis mengikut keperluan untuk mencapai kesan yang lebih sejuk.

Atas ialah kandungan terperinci Bagaimana untuk melaraskan nada dan lengkung gambar dalam Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!