背景

今天学习Diffusion模型时，突然想到了模糊哈希算法。

Diffusion 是对热力学扩散过程的模仿

在我们打开一个网页，加载高分辨率图像可能会导致加载时间过长，影响用户体验。

一般解决办法如下：

模糊哈希

模糊哈希（Blur hash）是一种用于图像压缩和显示占位符的技术，它将图像的视觉特征转换成一个短字符串，以便在网络传输中快速加载和显示占位符，同时保留图像的大致外观。下面是模糊哈希编码的一般工作流程：

实现步骤

1. 1. 图像分析 ：对输入的图像进行分析，提取出图像的视觉特征，如颜色分布、结构信息等。
2. 2. 特征压缩 ：将提取的视觉特征进行压缩，以便用一个较短的字符串来表示。
3. 3. 字符串表示 ：算法生成一个短字符串，称为模糊哈希码，它包含了图像的视觉信息。这个哈希码可以在需要显示占位符时用来快速加载，并在需要时解码还原成图像。
4. 4. 显示占位符 ：模糊哈希码可以用来生成图像的占位符，这样在网络传输中可以先加载占位符，待图像数据加载完成后再替换成原始图像，提高用户体验。

Blurhash-CSharp

有多种语言实现，下面以C#代码示例。

用美丽的模糊状态替换让人不舒服的灰色框，用户会很高兴。

Blurhash 字符串足够短，可以作为 JSON 对象中的字段添加并存储在数据库中。

这些实现很简单并且易于移植到新语言，最终结果是为我们的用户提供流畅且有趣的体验。

示例代码

1、测试对图片进行模糊哈希 编码的功能，并验证编码结果是否符合预期。

const string SourceHash = "|20Ktja2e-eSe8g2e9gNene,dCg$gOf8gieTf+eTgNd=g$eSeSgOeng3f7heeng4e.eTfie.g3e.Z#d;g4gOg4f7e.f6f,gigNf+eSeSe-g3emg3g3e-eTgOgNf+g3eTf+eTf+emf+e.eTgNeng3e.gOe:fif5f6g3eTf+";

[Fact]
public async Task EncodingTests()
{
    var sourceImage = await Image.LoadAsync<Rgba32>(@"Resources\Specimens\Sample.png");

    var result = Blurhasher.Encode(sourceImage, 9, 9);

    result.Should().Be(SourceHash);
}

Sample.png

2、以下验证模糊哈希算法的 解码功能是否正确，通过比较解码后的图像数据与预期数据是否一致来进行测试。在测试过程中，会将解码后的图像数据保存为PNG格式，并与预期的PNG文件进行比较。

[Fact]
public async Task DecodingTests()
{
    var result = Blurhasher.Decode(SourceHash, 200, 200);

    await using var ms = new MemoryStream();
    await result.SaveAsPngAsync(ms);
    ms.Position = 0;
    using var resultStream = new BinaryReader(ms);
    var resultBytes = resultStream.ReadBytes((int)ms.Length);

    await using var expectation = File.OpenRead(@"Resources\Expectations\BlurResult1.png");
    using var fileStream = new BinaryReader(expectation);
    var actualBytes = fileStream.ReadBytes((int)expectation.Length);

    resultBytes.Should().BeEquivalentTo(actualBytes);
}

BlurResult1.png