BlurHash 紧凑图像占位符编码器

解决什么问题

当页面或移动应用展示大量图片时，完整图片下载完成前用户往往只能看到空白区域、旋转加载动画或因图片尺寸未知导致的布局跳动。传统做法是预生成缩略图服务器，但这会增加存储成本与请求链路；直接显示原图则会在弱网下出现明显的加载空白。

BlurHash 的思路是：把图片的平均颜色与低频色彩分布压缩成一串极短的字符串（通常不到 100 个字符），客户端拿到这串文本后，用一小段纯前端代码就能解码并绘制出模糊预览图。这样在完整图片到达前，界面上已经有一个色彩过渡自然的占位区域，而不是刺眼的空白或 spinner。

核心能力与工作流程

这个代理技能封装了 Wolt 的 BlurHash 算法，核心能力包括：

• 编码（Encode）：对输入图像进行降采样，提取平均色，并对色彩分量做低频量化，输出形如 LKO2?U%2Tw=w,WE... 的紧凑哈希字符串。
• 解码（Decode）：将哈希字符串还原为 2D 像素缓冲，再通过 canvas 或 CSS 背景图渲染成模糊预览。
• 代理分发：技能本身不重新发明算法，而是对接上游实现，让 Agent 或开发流程可以按需调用编码/解码逻辑。

典型步骤是：上传图片 → 生成 BlurHash 字符串 → 将字符串随图片 URL 一起下发 → 客户端先解码渲染占位图 → 原图加载完成后无缝替换。整个过程不需要额外的图片存储，也不需要专门的缩略图服务。

适用边界与注意点

• BlurHash 是有损模糊编码，只能作为加载过渡，不能替代真实图片，也不适合需要保留文字、人脸细节的场景。
• 编码端与解码端必须使用兼容的算法版本，否则可能出现色彩偏移或解码失败。
• 大尺寸原图的编码过程需要先降采样，对超大图直接处理会带来不必要的计算开销。
• 该技能为代理实现，官方提示无法自动提取基于源代码的安装或使用说明。在敏感工作流中运行前，应审查上游项目源码与许可协议。
• 解码结果依赖客户端色彩空间处理，跨浏览器可能出现轻微色差，建议在目标环境中做视觉验证。