blurhash の実装をしようとしました。

[inugamine]

No description provided.

[inugamine]

画像添付時にblurhashを計算して投稿データに含めるようにし、画像表示時にはblurhashをプレースホルダーとして表示するようにしました。app版・web版の両方に対応しています。

変更内容

投稿側（blurhash計算・送信）

• computeBlurhash(file: File) ユーティリティを追加
  • OffscreenCanvas で画像を32px程度にリサイズしてから blurhash の encode() で計算
  • 画像以外のファイル（GLB等）は undefined を返しスキップ
  • component: (4, 3)
• Composer.tsx の handleSubmit で uploadImage と computeBlurhash を Promise.all で並行実行し、medias に blurhash フィールドを含めて投稿

表示側（blurhashデコード・プレースホルダー表示）

• BlurhashImage コンポーネントを追加
  • blurhash が指定されていれば、decode() でcanvasにぼかし画像を描画し、画像ロード中にプレースホルダーとして表示
  • 画像ロード完了後に0.3秒フェードインで切り替え
  • blurhash がない既存投稿は従来通りの <img> 表示にフォールバック
• MediaMessage.tsx の画像表示を <img> → <BlurhashImage> に差し替え

変更ファイル

新規

• app/src/utils/computeBlurhash.ts
• web/src/utils/computeBlurhash.ts
• app/src/components/BlurhashImage.tsx
• web/src/components/BlurhashImage.tsx

変更

• app/src/components/Composer.tsx
• web/src/components/Composer.tsx
• app/src/components/message/MediaMessage.tsx
• web/src/components/message/MediaMessage.tsx

依存パッケージ

• blurhash を app / web 両ワークスペースに追加

[totegamma]

ありがとうございます！！！！！