BlurHash不是HTML原生能力，必须通过JS解码（如blurhash.decode()）生成base64图像并设为CSS background-image实现占位；直接写或background-image: blurhash(...)均无效，因浏览器不识别该属性和函数，且无原生MIME支持。
BlurHash 本身不是 HTML 原生能力，必须靠 JS 解码 + CSS 渲染配合实现——直接写 <img blurhash="..." alt="HTML怎么做blurhash占位_html BlurHash模糊占位方案【收藏】" > 不会生效，浏览器根本不认这个属性。
BlurHash 是什么，为什么不能只靠 CSS
BlurHash 是一种把小图压缩成极短字符串（如 L544~WDRj[j[ayfQRO{MvD^iMf）的算法，本质是 YUV 色彩空间的基函数编码。它不传输像素，只传系数；解码需 JS 运行时计算生成 Canvas 像素，再转为 data:image/png;base64 或直接 draw 到 DOM 中。
这意味着：
- CSS 的
background-image无法直接解析 BlurHash 字符串——它只接受 URL 或 base64 数据 URI - 你不能在 HTML 里写
style="background-image: blurhash(L544~W...)"，这语法非法，浏览器静默忽略 - 所有“BlurHash 占位”方案，底层都绕不开一次 JS 解码调用，哪怕只是调用
blurhash.decode()
怎么用 blurhash.js 实现最小可行占位
最轻量、无构建依赖的落地方式：引入库 + 解码后塞进背景图 + 控制显隐。关键不是“怎么模糊”，而是“怎么不闪、不抖、不重绘”。
立即学习“前端免费学习笔记（深入）”；
实操要点：
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 从 woltapp/blurhash 下载
blurhash.min.js，或通过 CDN：<script src="https://unpkg.com/blurhash@latest/dist/blurhash.umd.js"></script> - HTML 中保留原始
src，把 BlurHash 存在data-blurhash属性里：<img data-blurhash="L544~W..." src="real.jpg" alt="..."> - JS 解码后生成 base64 图，设为父容器 background，而非直接改
<img alt="HTML怎么做blurhash占位_html BlurHash模糊占位方案【收藏】" >的src（避免二次加载） - 必须给容器设固定尺寸或
aspect-ratio，否则解码图渲染前仍会塌陷
示例片段：
const img = document.querySelector('img[data-blurhash]');
const wrapper = img.parentElement;
const hash = img.dataset.blurhash;
if (hash && window.BlurHash) {
try {
const pixels = BlurHash.decode(hash, 32, 32); // 宽高可调，越大越准但越慢
const canvas = document.createElement('canvas');
canvas.width = 32; canvas.height = 32;
const ctx = canvas.getContext('2d');
ctx.putImageData(pixels, 0, 0);
const url = canvas.toDataURL('image/png');
wrapper.style.backgroundImage = `url(${url})`;
wrapper.style.backgroundSize = 'cover';
} catch (e) {
wrapper.style.background = '#f0f0f0';
}
}
blurhash.decode() 的坑：参数、性能与 fallback
解码不是“越大越好”，也不是“越快越稳”。不同参数组合直接影响首帧感知和内存占用。
-
BlurHash.decode(hash, width, height)中的width/height是输出 canvas 尺寸，不是最终显示尺寸——32×32 足够做占位，64×64 开始明显卡顿（尤其低端安卓） - 解码失败常见于：空 hash、非法字符、
width/height超过 100（部分版本会 throw），务必包try/catch - 不要在滚动中批量 decode —— 每次调用都触发新 Canvas 创建和像素写入，容易触发 GC 暂停；懒加载场景建议节流或用
requestIdleCallback - fallback 必须有：解码失败时退到纯色背景（如
#e8e8e8），别留空或透明，否则用户看到的是白屏
为什么不用 +
因为目前没有任何浏览器支持 image/blurhash MIME 类型，W3C 也未将其纳入标准。所有试图用 <source srcset="..." type="image/blurhash"></source> 的写法，都会被浏览器当无效 source 忽略，降级到下一个 <source></source> 或直接走 <img src alt="HTML怎么做blurhash占位_html BlurHash模糊占位方案【收藏】" >。
真正能用的降级链只有两条：
- JS 解码成功 → base64 背景图 → 真实图片
load后移除背景 + 显示 - JS 解码失败 / 不可用 → 纯色背景 / 渐变 → 真实图片加载完成即覆盖
没有第三条路。所谓“原生 BlurHash 支持”，目前只存在于 React/Vue 组件封装层，底层仍是 JS 解码+CSS 注入。
