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

Author: inugamine

app/package.json

@@ -18,6 +18,7 @@
     "@tauri-apps/plugin-barcode-scanner": "^2.4.4",
     "@tauri-apps/plugin-haptics": "^2.3.2",
     "@tauri-apps/plugin-opener": "^2",
+    "blurhash": "^2.0.5",
     "boring-avatars": "^2.0.4",
     "motion": "^12.36.0",
     "react": "^19.2.4",

app/src/components/Composer.tsx

@@ -10,6 +10,7 @@ import { CssVar } from '../types/Theme'
 import { ComposerMode } from '../contexts/Composer'
 import { MdImage, MdClose } from 'react-icons/md'
 import { uploadImage } from '../utils/uploadImage'
+import { computeBlurhash } from '../utils/computeBlurhash'
 import { hapticSuccess } from '../utils/haptics'
 import { MdSend } from 'react-icons/md'
 import { MdEmojiEmotions } from 'react-icons/md'
@@ -224,10 +225,14 @@ export const Composer = (props: Props) => {
                         // 画像をアップロード
                         const uploadedMedias = await Promise.all(
                             mediaDrafts.map(async (media) => {
-                                const [url, typ] = await uploadImage(client, media.file)
+                                const [[url, typ], blurhash] = await Promise.all([
+                                    uploadImage(client, media.file),
+                                    computeBlurhash(media.file)
+                                ])
                                 return {
                                     mediaURL: url,
-                                    mediaType: typ
+                                    mediaType: typ,
+                                    ...(blurhash ? { blurhash } : {})
                                 }
                             })
                         )

app/src/utils/computeBlurhash.ts

@@ -0,0 +1,29 @@
+import { encode } from 'blurhash'
+
+const RESIZE = 32
+const COMPONENT_X = 4
+const COMPONENT_Y = 3
+
+/**
+ * 画像ファイルからblurhashを計算する。
+ * 画像以外のファイルが渡された場合はundefinedを返す。
+ */
+export const computeBlurhash = async (file: File): Promise<string | undefined> => {
+    if (!file.type.startsWith('image/')) return undefined
+
+    const bitmap = await createImageBitmap(file)
+
+    const aspect = bitmap.width / bitmap.height
+    const width = aspect >= 1 ? RESIZE : Math.round(RESIZE * aspect)
+    const height = aspect >= 1 ? Math.round(RESIZE / aspect) : RESIZE
+
+    const canvas = new OffscreenCanvas(width, height)
+    const ctx = canvas.getContext('2d')
+    if (!ctx) return undefined
+
+    ctx.drawImage(bitmap, 0, 0, width, height)
+    bitmap.close()
+
+    const imageData = ctx.getImageData(0, 0, width, height)
+    return encode(imageData.data, width, height, COMPONENT_X, COMPONENT_Y)
+}