Vue で画像のグレースケールおよび白黒処理を実装するにはどうすればよいですか?

Vue で画像のグレースケールおよび白黒処理を実装するにはどうすればよいですか?

フロントエンド開発では、多くの場合、画像をグレースケールまたは白黒に変換するなど、画像に特殊効果処理を実行する必要があります。 Vue では、いくつかの簡単なテクニックを使用してこれらの効果を実現できます。この記事では、Vue で画像のグレースケールおよび白黒処理を実装する方法を紹介し、対応するコード例を添付します。

グレースケール処理

グレースケール処理は、カラー画像を白黒画像に変換し、画像がグレースケール情報のみを持ち、カラー情報を持たないようにすることです。以下は、Vue でグレースケール処理を実装するコード例です。

<template>
  <div class="container">
    <img  class="original lazy"  src="/static/imghw/default1.png"  data-src="originalImage"  : @load="convertToGrayscale" alt="Vue で画像のグレースケールおよび白黒処理を実装するにはどうすればよいですか?" >
    <img  class="grayscale lazy"  src="/static/imghw/default1.png"  data-src="grayscaleImage"  : v-show="grayscale" alt="Vue で画像のグレースケールおよび白黒処理を実装するにはどうすればよいですか?" >
  </div>
</template>

<script>
export default {
  data() {
    return {
      originalImage: 'path/to/original/image.jpg',
      grayscaleImage: '',
      grayscale: false
    };
  },
  methods: {
    convertToGrayscale() {
      let canvas = document.createElement('canvas');
      let ctx = canvas.getContext('2d');
      let img = document.querySelector('.original');
      canvas.width = img.width;
      canvas.height = img.height;
      ctx.drawImage(img, 0, 0);
      let imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
      let data = imageData.data;
      for (let i = 0; i < data.length; i += 4) {
        let brightness = (data[i] + data[i + 1] + data[i + 2]) / 3;
        data[i] = brightness;
        data[i + 1] = brightness;
        data[i + 2] = brightness;
      }
      ctx.putImageData(imageData, 0, 0);
      this.grayscaleImage = canvas.toDataURL();
      this.grayscale = true;
    }
  }
};
</script>

<style scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.original, .grayscale {
  max-width: 300px;
}

.grayscale {
  display: none;
}
</style>

上記のコードでは、<img class="original lazy" src="/static/imghw/default1.png" data-src="originalImage" alt="Vue で画像のグレースケールおよび白黒処理を実装するにはどうすればよいですか?" > の src 属性を通じてバインドします。タグ オリジナルのカラー絵です。画像が読み込まれたら、convertToGrayscale メソッドを使用して画像をグレースケールに変換します。このメソッドでは、canvas 要素を作成し、getContext('2d') を通じてキャンバスのコンテキストを取得し、元の画像をキャンバスに描画します。次に、キャンバス上のピクセル データを取得し、各ピクセルの RGB 値を輝度値に変換し、次にピクセル データ内の RGB 値を輝度値に更新し、最後に更新されたピクセル データをキャンバスに戻します。最後に、キャンバスは toDataURL メソッドを呼び出して画像の Base64 エンコードに変換され、グレースケール画像の src 属性にバインドされます。

上記のコードでは、Vue の scoped スタイルを使用して、スタイル ルールが現在のコンポーネントにのみ適用されるようにしています。

白黒処理

白黒処理とは、カラー画像を白黒のみの画像に変換することです。以下は、Vue で白黒処理を実装するコード例です。

<template>
  <div>
    <img  class="original lazy"  src="/static/imghw/default1.png"  data-src="originalImage"  : @load="convertToBlackAndWhite" alt="Vue で画像のグレースケールおよび白黒処理を実装するにはどうすればよいですか?" >
    <img  class="black-and-white lazy"  src="/static/imghw/default1.png"  data-src="blackAndWhiteImage"  : v-show="blackAndWhite" alt="Vue で画像のグレースケールおよび白黒処理を実装するにはどうすればよいですか?" >
  </div>
</template>

<script>
export default {
  data() {
    return {
      originalImage: 'path/to/original/image.jpg',
      blackAndWhiteImage: '',
      blackAndWhite: false
    };
  },
  methods: {
    convertToBlackAndWhite() {
      let canvas = document.createElement('canvas');
      let ctx = canvas.getContext('2d');
      let img = document.querySelector('.original');
      canvas.width = img.width;
      canvas.height = img.height;
      ctx.drawImage(img, 0, 0);
      let imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
      let data = imageData.data;
      for (let i = 0; i < data.length; i += 4) {
        let brightness = (data[i] + data[i + 1] + data[i + 2]) / 3;
        if (brightness > 128) {
          data[i] = 255;
          data[i + 1] = 255;
          data[i + 2] = 255;
        } else {
          data[i] = 0;
          data[i + 1] = 0;
          data[i + 2] = 0;
        }
      }
      ctx.putImageData(imageData, 0, 0);
      this.blackAndWhiteImage = canvas.toDataURL();
      this.blackAndWhite = true;
    }
  }
};
</script>

<style scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.original, .black-and-white {
  max-width: 300px;
}

.black-and-white {
  display: none;
}
</style>

上記のコードでは、グレースケール処理と同様に、canvas 要素も作成し、元のカラー画像を描画します。キャンバスの真ん中まで。次に、キャンバス上のピクセルデータを取得し、各ピクセルのRGB値を輝度値に変換します。違いは、輝度値をしきい値 128 と比較することにより、128 を超える輝度を持つピクセルを白として設定し、128 未満の輝度を持つピクセルを黒として設定することです。最後に、ピクセル データをキャンバスに戻し、toDataURL メソッドを呼び出してキャンバスを画像の Base64 エンコードに変換します。最後に、Vue のデータ バインディングを介してページ上に白黒画像を再度表示します。

以上はVueで画像のグレースケール処理と白黒処理を実装する方法とサンプルコードです。これらのテクニックは、フロントエンド開発においてさまざまな画像の特殊効果を実現するのに役立ちます。この記事がお役に立てば幸いです!

以上がVue で画像のグレースケールおよび白黒処理を実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。