【JavaScript】カウント付きでボヤケた画像からクッキリ画像を表示する方法

2022年4月13日JavaScript

JavaScriptでカウント付きでボヤケた画像から、クッキリした画像を表示する方法を紹介します。

カウント付きでボヤケた画像からクッキリ画像を表示するデモ

See the Pen
Blur to Clear image by Sosak (@Sosak2021)
on CodePen.

JavaScriptコードの説明

const loadText = document.querySelector(".loading-text");
const bg = document.querySelector(".bg");
const btn = document.querySelector("button");

btn.addEventListener("click", () => {
  setBlur();
});

function setBlur() {
  // 最初の値
  let load = 0;

  // 20ms秒ごとに実行
  let int = setInterval(blurring, 20);

  function blurring() {
    load++;

    // 100で止まる
    if (load > 99) {
      clearInterval(int);
    }

    loadText.innerText = `${load}%`;
    loadText.style.opacity = scale(load, 0, 100, 1, 0);
    bg.style.filter = `blur(${scale(load, 0, 100, 20, 0)}px)`;
  }

  // これでカウントを動かす
  const scale = (num, in_min, in_max, out_min, out_max) => {
    return ((num - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min;
  };
}

ボタンをクリックすると、setIntervalが走ります。
20ms毎にblurringという関数を実行し続けます。
loadが99より上になると、clearIntervalで処理が止まります。
loadが0から99に上がるにつれて、それと連動してテキストのopacityと、bgクラスのfilterのblurも0に近づきます。
つまりテキストは非表示になり、画像はぼやけた状態からはっきりとした画像になります。

setInterval()に連動してカウントを動かす

HTML、CSS、JavaScriptのソースコードは上を参照してみてください。

    const scale = (num, in_min, in_max, out_min, out_max) => {
    return ((num - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min;
  };

上の記述は、スタックオーバーフローでアドバイスされていたものです。
これをload変数に応じてopacityとblurの値が変化するようにセットします。