Blurhashとmduiを使用した動的テーマカラーとぼかしプレビューの実装

現代のWeb開発において、ユーザー体験の向上はしばしば細部の最適化を伴います。Blurhashは、ぼかしハッシュの生成とデコードに使用されるライブラリlibraryで、画像のぼかしプレビュー効果を実現できます。一方、mduiは、Material Design 3（Material You）に基づいたフロントエンドfrontendフレームワークframeworkを提供し、豊富なコンポーネントcomponentとスタイルstyleを含んでいます。このブログblog記事では、Blurhashとmduiを組み合わせて、背景画像に基づいて動的にテーマthemeカラーを設定するページpageを実装し、画像読み込みパフォーマンスperformanceを最適化します。

目標H2#

ページpageの下部に背景画像を配置し、その背景画像の主要な色調をページpage全体のテーマthemeカラーとして使用したいと考えています。

画像を前処理してBlurhashを生成し、ランダム画像apiを通じて直接提供H2#

ページpage読み込み時の計算オーバーヘッドoverheadを避けるため、各画像のBlurhashを事前に生成し、JSONファイルfileに保存できます。

以下のPythonスクリプトscriptは、画像を一括処理してBlurhashを生成できます：

python

import concurrent.futures
import os
import json
import logging
from PIL import Image
from blurhash import encode

logging.basicConfig(level=logging.INFO)

current_path = os.path.abspath(os.path.dirname(__file__))

def encode_file(file):
    logging.info(f'Encoding {file} to blurhash')
    image = Image.open(os.path.join(current_path, file))
    blurhash = encode(image, x_components=4, y_components=3)
    return file, blurhash

current_files = [f for f in os.listdir(current_path) if f.endswith(('jpg', 'png', 'jpeg'))]
blurhashes = {}

with concurrent.futures.ThreadPoolExecutor() as executor:
    future_to_file = {executor.submit(encode_file, file): file for file in current_files}
    for future in concurrent.futures.as_completed(future_to_file):
        file = future_to_file[future]
        try:
            file, blurhash = future.result()
            blurhashes[file] = blurhash
        except Exception as exc:
            logging.error('%r generated an exception: %s' % (file, exc))

with open('blurhash.json', 'w') as f:
    json.dump(blurhashes, f)

これにより、バックエンドbackendはこのjsonファイルfileを読み取って画像に対応するblurhash値を取得し、画像と一緒に提供できます

提供されるデータdataは以下のようになります

json

{
    "code": "200",
    "image": "https://cdn.tnxg.top/images/wallpaper/5.jpg",
    "blurhash": "LcI~*}r=TJS$~VX8S2b^?HW;wIoe"
}

背景画像とテーマthemeカラーの設定H2#

この時点で、画像のurlと対応するぼかしハッシュhashを既に持っています。

この時、ぼかしハッシュhashをbase64形式の画像に変換できます

    const blurredImage = (blurhash) => {
      if (!blurhash) return '';
      const pixels = decode(blurhash, 32, 32);
      const canvas = document.createElement('canvas');
      canvas.width = 32;
      canvas.height = 32;
      const ctx = canvas.getContext('2d');
      const imageData = ctx.createImageData(32, 32);
      imageData.data.set(pixels);
      ctx.putImageData(imageData, 0, 0);
      return canvas.toDataURL();
    };

そして、base64画像から新しいimageオブジェクトobjectを作成し、そのテーマthemeカラーを取得できます

元の画像のぼかしハッシュhashから変換された画像なので、主要な色調はそれほど変わらないはずです。したがって、この色を直接テーマthemeカラーとして使用できます

const blurredImageData = blurredImage(data.blurhash);
const ColorImage = new Image();
ColorImage.src = blurredImageData;
getColorFromImage(ColorImage)
    .then(color => {
        setColorScheme(color);
        console.log('Color scheme set.' + color);
    })

生成されたbase64ぼかし画像は、カードcardの背景としても使用でき、背景とカードcardの色調を一致させて調和を保つことができます

Blurhashの受け渡しについては、状態管理Piniaを使用して変換後のbase64画像をグローバルglobal状態に直接保存できます。これにより、毎回再計算する必要がなくなります

最終効果H2#

以上の手順により、ページpage読み込み時にまずぼかしプレビューpreview画像を表示し、その主要な色調に基づいて動的にテーマthemeカラーを設定することを実現しました。高解像度の背景画像の読み込みが完了したら、ぼかしプレビューpreview画像を置き換え、ユーザーuser体験とページpageパフォーマンスperformanceを向上させました。

以下は最終効果の例です：

使用プロジェクトproject

このブログblog記事が、Blurhashとmduiを使用してWebアプリケーションapplicationのユーザーuser体験を向上させる方法をより良く理解し、活用するのに役立つことを願っています。ご質問やご提案がありましたら、コメントcomment欄にお気軽にお書きください。

Blurhashとmduiを使用した動的テーマカラーとぼかしプレビューの実装

この記事の最終更新は 1 年 9 か月前です

目標H2#

画像を前処理してBlurhashを生成し、ランダム画像apiを通じて直接提供H2#

背景画像とテーマthemeカラーの設定H2#

最終効果H2#

コメント(1)

コメント(1)

この記事の最終更新は 1 年 9 か月 前です

目標H2#

画像を前処理してBlurhashを生成し、ランダム画像apiを通じて直接提供H2#

背景画像とテーマthemeカラーの設定H2#

最終効果H2#

コメント(1)

コメント(1)

この記事の最終更新は 1 年 9 か月前です