BlurHashジェネレーター
画像をBlurHash文字列にし、任意のハッシュをぼかしプレビューへ復号します。
BlurHashジェネレーターは完全にブラウザ内で動作します。置いた画像は端末上で符号化され、送信されません。
プレースホルダー画像ジェネレーターを開く
BlurHash生成 について
BlurHashは20文字あまりの文字列で、画像のぼかした姿を保持します。本物の写真が届くまで、灰色の箱がレイアウトを揺らす代わりに、それらしいプレースホルダーを見せられるだけの情報です。エンコーダーは画像を少数の余弦基底に射影し、係数を量子化して83進数に詰め込みます。だからこそ結果は画像URLの隣にJSONで無理なく収まります。このツールは置いた画像を符号化し、任意のハッシュを復号して見た目を確認でき、コード片も渡します。
機能
- PNG、JPEG、WebPをBlurHash文字列に符号化
- 各軸1〜9の成分数を調整し、文字数も表示
- 作ったばかりでなく任意の正しいハッシュを復号
- ぼかしのコントラストを強めるpunch調整
- 背景色に使えるハッシュの平均色
- React、HTML属性、JSONレスポンス用のコード片
BlurHash生成 の使い方
- 画像を置くか、復号したいハッシュを貼り付けます
- 成分数を調整します。写真なら4×3が無難です
- ハッシュをコピーし、画像URLと一緒に保存します
- 表示側にはReactやHTMLのコード片を使います
例
入力
photo.jpg · 4 × 3 components
出力
LEHV6nWB2yk8pyo0adR*.7kCMdnj
Average colour #8a7f6e · 28 characters
28文字は多くの画像URLより短く、二度目の通信なしに即座に表示されます。
よくあるエラーとトラブルシューティング
- 保存したハッシュが復号できない。 — 文字数は先頭文字が示す成分数と一致する必要があります。4 + 2 × x × yです。途中で切れた文字列はこの検査で落ちます。
- プレースホルダーが元画像に似ていない。 — 成分数が足りません。1×1は平均色だけで、各軸3〜4にすると写真として見分けが付きます。
よくある質問
- BlurHashとは何ですか。
- 画像の低周波成分、つまりぼかした形と色を符号化した短い文字列で、画像URLの隣に保存して使います。
- BlurHash文字列の長さは。
- 4文字に成分ごと2文字を加えた長さです。4×3なら28文字、1×1なら6文字になります。
- 成分数はいくつが良いですか。
- 写真は4×3が定番です。縦位置の人物は3×4が向くこともあり、平坦な図版なら2×2で足ります。
- 画像はアップロードされますか。
- いいえ。画像はcanvasに描かれてブラウザ内で符号化されるので、写真が端末から出ることはありません。
関連ツール
すべての ArrayKit ツール