Vue で画像のトーンとカーブを調整するにはどうすればよいですか?-Vue.js-php.cn

Vue で画像のトーンとカーブを調整するにはどうすればよいですか?

WBOY

リリース： 2023-08-17 11:49:06

オリジナル

1430 人が閲覧しました

Vue で画像のトーンとカーブを調整するにはどうすればよいですか?

Vue で画像のトーンとカーブを調整する方法

Vue 開発では、より良い視覚効果を実現するために、画像のトーンとカーブを調整する必要がよくあります。この記事では、Vue と、画像のトーンやカーブを調整するためによく使用されるライブラリの使用方法をコード例とともに紹介します。

1. 階調調整

階調調整は、画像の色を変更することで実現します。 Vue では、CSS フィルター属性を使用してトーンを調整できます。

次は、Vue と CSS のフィルタープロパティを使用して画像の色相を調整する方法を示す簡単な例です:

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

ログイン後にコピー

上記のコードでは、v-model を使用します。色相を調整するディレクティブ範囲入力要素にバインドして、スライダーをスライドさせて色相の値をリアルタイムに変更できるようにします。次に、計算された属性を通じて、この値を調整された画像パスに接続します。

2. カーブ調整

カーブ調整は、画像の明るさ、コントラスト、彩度などのパラメータを変更することで実現されます。 Vue では、CamanJS や pica などのいくつかの JavaScript 画像処理ライブラリを使用してカーブ調整を実行できます。

次は、CamanJS ライブラリを使用した例で、Vue と CamanJS を使用して画像の曲線を調整する方法を示しています。

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

ログイン後にコピー

上記のコードでは、v-model ディレクティブを使用しています。明るさとコントラストを組み合わせるには、彩度と範囲入力要素をバインドします。次に、計算された属性で、最初に元の画像をキャンバスに描画し、次に CamanJS を使用してカーブ調整を実行し、最後に調整された画像をデータ URL に変換して返します。

概要:

Vue といくつかの画像処理ライブラリを使用すると、画像のトーンやカーブを簡単に調整できます。上記のコード例では、スライダーの値を調整することで、画像のトーンとカーブの効果をリアルタイムに変更できます。開発者は、ニーズに応じてフィルタパラメータをカスタマイズし、よりクールな効果を実現できます。

以上がVue で画像のトーンとカーブを調整するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。