見出し画像

canvasを用いた画像のぼかし処理

Sasaki Fuma

こんにちは。HANOWAエンジニアの佐々木です。

今回は地味に面倒だった画像のぼかし処理についてです。

最近、ログインをしていないユーザーへの表示情報を制御する対応をしていましたが、その中で特定の画像にぼかし処理を入れる必要があり少し考慮が必要だったので、それについてお話しいたします。

ぼかし処理について

ぼかし処理というは以下の右画像のような処理です。

ぼかしありなし比較

実は画像のぼかし処理自体は、難しいことではありません。私も今回対応するにあたって最初はimgタグにcssでフィルターかければ良いなと思っておりました。

imgにfilterを当てたぼかしの実装

上で添付した画像のコードは以下になります。

<template>
  <div class="dummy-wrapper">
    <div class="blur-wrapper">
      <div>
        <div>ぼかしなし</div>
        <img class="dummy-image" src="~/assets/img/logo_vertical.svg" />
      </div>

      <div>
        <div>ぼかしあり</div>
        <img class="dummy-image blur" src="~/assets/img/logo_vertical.svg" />
      </div>
    </div>
  </div>
</template>

<style lang="scss">
.dummy-wrapper {
  padding: 24px;

  .blur-wrapper {
    display: flex;
    align-items: center;
    font-weight: bold;
    gap: 48px;
  }

  .dummy-image {
    width: 200px;
  }

  .blur {
    filter: blur(10px); // これがぼかしのフィルター
  }
}
</style>

この処理自体はとても簡単です。cssで1行、filter: blur(10px);と記載することで対応できてしまいます。
じゃあこれでOKじゃん！と思うかもしれませんが、実は今回はこれだとNGです。 今回の要件は「ログインをしていないユーザーへの表示情報を制御」です。
実はこの実装方法だとぼかした画像を確認する方法が存在します。

ぼかした画像の確認方法

ブラウザの機能にあるデベロッパーツールを用いることで確認できます。開発者ツールやdev toolとも呼ばれます。webサービスの開発をしたことがある人はほぼ100％ご存知の機能だと思います。

使用しているブラウザによって異なりますが、GoogleChromeの場合はF12キーを押すことで確認することができます。

デベロッパーツール

では開発者ツール上のコードでぼかした画像部分を確認してみましょう。

開発者ツールでぼかし画像を確認

見えてしまっております…。背景をぼかしたい場合などはこれでも問題ないのですが、表示情報を制御したい場合に画像を確認できる方法があるのは良くないですね。

というわけで開発者ツールでも確認できない方法で実装する必要があります。

canvasを用いたぼかし処理

結論imgタグではなくcanvasタグを使用して、canvasタグにぼかしフィルターを適用します。そうすることで開発者ツール上でも画像の確認ができなくなります。

<template>
  <div class="dummy-wrapper">
    <div class="blur-wrapper">
      <div>
        <div>ぼかしなし</div>
        <img class="dummy-image" src="~/assets/img/logo_vertical.svg" />
      </div>

      <div>
        <div>ぼかしあり</div>
        <canvas 
          ref="blurCanvas"
        ></canvas>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    this.addBlur();
  },
  methods: {
    addBlur() {
      const canvas = this.$refs.blurCanvas;
      const ctx = canvas.getContext('2d');
      const img = new Image();
      img.src = require('~/assets/img/logo_vertical.svg');

      img.onload = () => {
        const imgWidth = 180;
        const imgHeight = 180;

        canvas.width = imgWidth + 20;
        canvas.height = imgHeight + 20;

        ctx.filter = 'blur(10px)'; // これがぼかしのフィルター
        ctx.drawImage(img, 10, 10, imgWidth, imgHeight);
      };
    },
  },
};
</script>

<style lang="scss">
.dummy-wrapper {
  padding: 24px;

  .blur-wrapper {
    display: flex;
    align-items: center;
    font-weight: bold;
    gap: 48px;
  }

  .dummy-image {
    width: 200px;
    height: 200px;
  }
}
</style>
開発者ツールで確認

ぼかし処理も問題なく入っており、開発者ツールでも画像が表示されなくなりました。
canvasを使用する場合はjavascript上で設定する必要があるので、コード量が増え少し複雑になってしまいますが、こうすることでぼかした画像を完全に確認できなくなります。

imgタグは静的な画像を表示する場合に利用されるもので、canvasタグはアニメーションなど動的な画像や図形を表示させるのに利用されます。
canvasの名前の通り、画像や図形を描画するための空間がcanvasタグで、中身に表示させるものは自由に設定することができます。
そして表示内容はjavascriptで設定するため開発者ツール上で確認することはできません。

まとめ

今回はcanvasを用いた画像のぼかし処理を行う方法を紹介いたしました。
他にもぼかしではなく画像にモザイク処理を当てる方法もあるので、また別の機会に紹介できればと思います。

HANOWAでは他のメンバーもnoteを書いているので、ぜひ見に行ってみてください！

この記事が気に入ったらサポートをしてみませんか？