apply-lqip.ts 是一个用于生成和应用低质量图像占位符（Low-Quality Image Placeholders, LQIP）的脚本。它通过提取图像的关键颜色并将其嵌入到 HTML 中，从而在图片加载完成前提供平滑的视觉过渡。

功能特性

• 颜色提取：将图像缩放至 3x3，提取左上、中心、右下三个位置的颜色。
• 高效存储：将提取的颜色压缩并打包成一个 32 位的整数（16 进制字符串），存储在 src/assets/lqip-map.json 中。
• 自动应用：扫描 dist 目录下的 HTML 文件，自动为 <img> 标签添加生成的 LQIP 样式。
• 缓存机制：通过 lqip-map.json 缓存已处理的图像，避免重复计算。

使用方法

在终端中运行以下命令：

pnpm apply-lqip

注意：该脚本通常在项目构建完成后运行，因为它需要处理 dist 目录中的 HTML 文件。

工作原理

1. 扫描图像：脚本会扫描 src/assets 目录下的所有图像文件。
2. 生成颜色哈希：
   • 使用 sharp 库将图像调整为 3x3 大小。
   • 提取三个关键像素的 RGB 值。
   • 将这些颜色值打包成一个 8 位的 16 进制字符串。
3. 更新映射表：将图像路径与颜色哈希的对应关系保存到 src/assets/lqip-map.json。
4. 注入 HTML：
   • 遍历 dist 目录中的 HTML 文件。
   • 查找带有特定类名或属性的 <img> 标签。
   • 将 LQIP 样式（通常是背景色或渐变）注入到 HTML 中。

相关配置

• 数据存储：src/assets/lqip-map.json
• 样式定义：相关的 CSS 样式通常定义在 src/styles/lqip.css 中。

参考文献

• LQIP CSS - Medium