简述：将带透明通道的PNG/BMP图片叠加到Framebuf上

PNG图片，维基百科简介：https://zh.wikipedia.org/wiki/PNG
现在带透明通道的最常见的PNG文件都是PNG 32格式，所以首先将PNG文件解析为RGBA-8-8-8-8即32位真彩像素(PNG 32)（A代表Alpha透明通道)

BMP 帧解析

BMP是最简单的图片文件格式，基本上就是为了存放在文件而勉强加了一些头尾而已。
看维基百科 https://en.wikipedia.org/wiki/BMP_file_format 的帧格式表，然后写结构体去序列化反序列化就能解出RGBA像素了。
以前用过c语言解析BMP，但是忘记写博客了，后面又写了一篇RUST解析BMP的分析文章：https://www.cnblogs.com/yucloud/p/rust-bmp_learn.html

PNG 帧解析

PNG文件编码比BMP复杂一点，但还是可以解析的。在no_std rust上我就偷懒使用了minipng库。
如果你需要c语言，可以自己写一个，参考标准文档RFC2083即可
需要Rust语言的解析器，可以参考：https://github.com/pommicket/minipng/blob/trunk/src/lib.rs

文件帧主要是单层TLV(Type-Length-Value)的方式。

RFC 2083 总结来说就是：

Header：文件格式头/也叫文件署名域，用于标识是否为PNG文件，避免了与其他格式的冲突和误判。
一个文件里有格式头，还有多个数据块。
每个数据块都由几个元素构成：长度，类型，数据体，CRC。这个基本所有的协议和文件都有类似设计。

PNG 定义了两种类型的数据块(chunk)，一种是标准的关键数据块(critical chunk)，另一种可选的辅助数据块(ancillary chunks)。我们只需要标准的关键数据块。

这里找到一篇表格化的帧解析文章：https://blog.csdn.net/qq_60131542/article/details/123450382

压缩算法：LZ77，哈夫曼huffman，Quantization

以下数据块I字开头是Image的意思

• IHDR，这个是图片头块，包括了图片信息：宽高、位深、颜色类型、压缩算法、滤波器方法、隔行扫描方法。
• PLTE 调色板区块（可选）
• IDAT 图片数据块，像素RGBA就在这里。该区有多个块
• IEND 图片结束块，也是特定的几个字节。
  还有其他的辅助区，但是一般我们用不到。总之TLV的方式可以让你通过 Type区分+Len偏移 只去拿需要的数据，而不用管其他区。

总之，RGBA从PNG文件解出来即可。

叠加算法

需要注意的是，透明通道A在屏幕上是不存在的，它唯一的作用是用于和背景运算叠加。也就是说，A通道是需要有背景色才能运算的。

这是将屏幕的RGB像素与现在PNG的RGBA像素合并/叠加的算法：
屏幕只能显示RGB，所有的A通道都会通过计算后叠加到RGB各分量上面

    fn blend_rgba_to_rgb(&self, background: &mut BltPixel) {
        // Alpha Blending
        // Result = Foreground×α + Background×(1−α)
        let alpha = self.0[3] as f32 / 255.0;
        let r = self.0[0] as f32;
        let g = self.0[1] as f32;
        let b = self.0[2] as f32;

        let blended_r = ((1.0 - alpha) * background.red as f32 + alpha * r) as u8;
        let blended_g = ((1.0 - alpha) * background.green as f32 + alpha * g) as u8;
        let blended_b = ((1.0 - alpha) * background.blue as f32 + alpha * b) as u8;

        background.red = blended_r;
        background.green = blended_g;
        background.blue = blended_b;
    }

以下是矩形叠加

///数学公式解法
//设：需要将png渲染到屏幕framebuf上矩形mfb上
//设：png的图片大小为(size_xp,size_yp)
//当前正在叠加渲染的座标为 (x,y)
                for y in 0..size_yp {
                    for x in 0..size_xp {
                        vec_png[x + y * size_xp].blend_blt_pixel(&mut mfb[x + y * size_xp]);
                    }
                }

我们把从PNG文件里解出来的RGBA像素通过矩形叠加到屏幕framebuf的像素上，即可完成PNG的显示。
如果没办法获得矩形部分的mfb(mframebuf)，也可以直接获取全屏framebuf再通过计算 需要渲染的起点座标偏移(x0,y0)，完成矩形部分叠加。

问题：这有什么用
答案：您看到的鼠标就是这样叠加上去的，另外还有显示器按键菜单等等OSD（on-screen display）功能，底层都是这个原理。

这篇文章是我为Slint-UI图像界面库贡献了一个UEFI的鼠标协议支持后写的一些记录，PR详见：https://github.com/slint-ui/slint/pull/5084/files

总结：最流行的文件/文件系统/分区格式/网络协议，基本上帧格式都是类似的 HDR(长度类型Checksum) Payload(多个数据块）END。结合一些魔法（TLV，算法指示，状态机指示）