BlurHash 生成器
把图片变成 BlurHash 字符串，也能把任意哈希解码成模糊预览。
BlurHash 生成器完全在你的浏览器中运行：放入的图片在本机编码，不会上传。
打开占位图生成器
关于 BlurHash 生成器
BlurHash 是一串二十来个字符的文本，保存着图片模糊后的样子：足以在真实图片下载期间显示一个能认出来的占位图，而不是一块在加载完成时把版式顶开的灰色方块。编码器把图片投影到少量余弦基函数上，量化系数后打包成 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
二十八个字符比多数图片 URL 还短，而且无需第二次请求就能立刻显示。
常见错误与故障排除
- 保存下来的哈希无法解码。 — 长度必须与首字符所示的分量数量吻合，即 4 + 2 × x × y。被截断的字符串通不过这项检查。
- 占位图和原图完全不像。 — 分量太少。1 × 1 只保存平均色，每个方向取 3 到 4 才能让照片辨认得出。
常见问题
- BlurHash 是什么？
- 一串紧凑的文本，编码了图片的低频内容，也就是它模糊后的形状与颜色，设计上就放在图片 URL 旁边。
- BlurHash 字符串有多长？
- 四个字符加上每个分量两个字符，所以 4 × 3 的哈希是 28 个字符，1 × 1 的是 6 个。
- 分量数量选多少合适？
- 照片常用 4 × 3；竖构图人像有时 3 × 4 更好，色块平坦的插图 2 × 2 就够。
- 生成哈希时图片会被上传吗？
- 不会。图片被绘制到 canvas 上并在你的浏览器中编码，照片始终不会离开设备。
相关工具
- 图片优化工具 — 重新编码并缩小图片（JPEG/WebP/PNG），可选调整尺寸。
- 占位图生成器 — 任意尺寸的 SVG、PNG 或 data URI 占位图。
- 图片配色提取器 — 从图片提取主色与配色，导出 HEX、RGB、HSL、CSS 与 Tailwind。
- Base64 图片编码器 / 解码器 — 将图片转换为带 HTML 和 CSS 片段的 Base64 Data URI，或将 Data URI 解码为可下载的图片。
- 图片格式转换工具 — 在浏览器中完整地在 PNG、JPEG 和 WebP 之间转换图片。
- 图片取色器 — 在浏览器中从图片取任意像素的 HEX、RGB 和 HSL 颜色值。
全部 ArrayKit 工具