Nuxt.js vue-image-effectを利用して画像にエフェクトかける

Nuxt.js vue-image-effectを利用して画像にエフェクトかける

ライブラリ「vue-image-effect」をインストールすると、画像に様座なエフェクトをかけることができます。ここでは、nuxt.jsで vue-image-effectを利用するための手順と簡単な使い方を記述してます。

環境

  • OS  ubuntu19.10
  • node v12.13.0
  • npm 6.13.7
  • Nuxt.js v2.11.0

Nuxt.js環境構築

下記のコマンドで構築。ここでは、nuxtappという名前でプロジェクトを作成してます。

下記の設定で構築してます。

外部IP許可

localhostではなくプライベートIPを利用して接続して確認したいので、作成したプロジェクト配下にあるpackage.jsonに下記を追加します。

vue-image-effectインストール

下記のコマンドでインストールします。

v-avatar使い方

pages配下にあるindex.vueを下記の通りに編集します。

起動します

ブラウザから http://プライベートIP:3000にアクセスすると画像に、ちょっとしたフラッシュみたいエフェクトがかかっていることが確認できます。

zoominさせたい場合は下記

grayScaleさせる場合は下記となります。

エフェクトは下記の通り、たくさんあります。

  • Zoom In
  • Zoom Out
  • Rotate
  • Rotate Reverse
  • Blur
  • Blur Reverse
  • Gray Scale
  • Gray Scale Reverse
  • Sepia
  • Sepia Reverse
  • Blue Gray
  • Blue Gray Reverse
  • Opacity
  • Opacity Reverse
  • Filter Blue
  • Filter Blue Reverse
  • Shine
  • Circle