能否将Blurhash字符串转换为CSS渐变背景用作图片加载占位符？

你可以通过现成库或手动实现的方式，把Blurhash转换为CSS渐变作为图片加载占位符，具体方案如下：

1. 现成库直接转换 #

有专门的库可以完成Blurhash到CSS渐变的转换，比如blurhash-to-css。它可以直接接收Blurhash字符串，输出对应的CSS渐变代码，用法示例：

import blurhashToCss from 'blurhash-to-css';

// 传入Blurhash，得到CSS渐变代码
const cssGradient = blurhashToCss('LKO2?U%2Tw=w]~RBVZRi};RPxuwH');
// 结果示例：radial-gradient(ellipse at center, rgb(120, 100, 150) 0%, rgb(80, 70, 100) 100%)

2. 基于官方库手动实现 #

如果不想依赖第三方库，也可以基于官方Blurhash库自己实现转换逻辑，步骤如下：

• 用官方库以低分辨率解码Blurhash，减少计算量
• 从解码后的canvas中提取关键位置的颜色
• 组合这些颜色生成CSS渐变代码

示例代码：

import { decode } from 'blurhash';

function blurhashToCssGradient(blurhash) {
  // 以4x4低分辨率解码，平衡性能和颜色代表性
  const pixels = decode(blurhash, 4, 4);
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  canvas.width = 4;
  canvas.height = 4;

  // 将像素数据写入canvas
  const imageData = ctx.createImageData(4, 4);
  imageData.data.set(pixels);
  ctx.putImageData(imageData, 0, 0);

  // 提取指定坐标的颜色
  const getRgbColor = (x, y) => {
    const [r, g, b] = ctx.getImageData(x, y, 1, 1).data;
    return `rgb(${r}, ${g}, ${b})`;
  };

  // 提取四个角落和中心的颜色，用于生成渐变
  const gradientColors = [
    getRgbColor(0, 0), getRgbColor(3, 0),
    getRgbColor(0, 3), getRgbColor(3, 3),
    getRgbColor(1, 1)
  ];

  // 返回径向渐变CSS代码，也可根据需求改为linear-gradient
  return `radial-gradient(circle, ${gradientColors.join(', ')})`;
}

// 使用示例
const gradient = blurhashToCssGradient('LKO2?U%2Tw=w]~RBVZRi};RPxuwH');
// 应用到元素
document.querySelector('.image-placeholder').style.background = gradient;

这种手动实现的方式可以灵活调整渐变类型（线性/径向）、颜色采样点数量，适配不同的视觉需求。

内容的提问来源于stack exchange，提问作者Shift and Shiftine