STM32F4_图片显示
目录
前言
1. 图片格式简介
2. 实验程序
2.1 main.c
2.2 piclib.c
2.3 piclib.h
前言
实际在开发产品的时候，我们都会用到图片解码。本节中，我们将学习如何通过STM32F4来解码 BMP/JPG/JPEG/GIF 等图片，并在 LCD 上显示出来。
1. 图片格式简介
在我们日常使用互联网进行通讯的过程中，会经常性的接触到图片，图片一般最常用的有三种：JPEG（或JPG）、BMP 和 GIF。其中 JPEG（或JPG）和 BMP 是静态图片，而 GIF 则是可以实现动态图片。
BMP图片格式：
BMP全称Bitmap，是windows操作系统中的标准图像文件格式，文件后缀名为 “.bmp” ，使用范围非常广泛。它采用位映射存储格式，除了图像深度可选以外，不采用其他任何压缩，因此，BMP所占用的空间很大，但是没有失真。BMP 文件的图像深度可选 1bit、4bit、8bit、16bit、24bit 及 32bit。BMP 文件存储数据时，图像的扫描方式是从左到右、从下到上的顺序。
典型的BMP图像文件由四部分组成：
1. 位图头文件数据结构，它包含 BMP 图像文件的类型、显示内容等信息；
2. 位图信息数据结构，它包含有 BMP 图像的宽、高、压缩方法，以及定义颜色等信息；
3. 调色板，这个部分是可选的，有些位图需要调色板，有些位图，比如真彩色图（ 24 位的 BMP ）就不需要调色板；
4. 位图数据，这部分的内容根据 BMP 位图使用的位数不同而不同，在 24 位图中直接使用 RGB ，而其他的小于 24 位的使用调色板中颜色索引值。
JPEG图片格式：
JPEG是Joint Photographic Experts Group（联合图像专家组）的缩写，文件后缀名为 “.jpg” 或 “.jpeg” ，是最常用的文件图像格式，由一个软件开发联合会组织制定，同 BMP 格式不同，JPEG 是一种有损压缩格式，能够将图像压缩在很小的储存空间，图像中重复或不重要的资料会被丢失，因此容易造成图像数据的损伤（BMP 不会，但是 BMP 占用空间大）。尤其是使用过高的压缩比例，将使最终解压缩后恢复的图像质量明显降低，如果追求高品质图像，不宜采用过高压缩比例。但是 JPEG 压缩技术十分先进，它用有损压缩方式去除冗余的图像数据，在获得极高的压缩率的同时能展现十分丰富生动的图像，换句话说，就是可以用最少的磁盘空间得到较好的图像品质。而且 JPEG 是一种很灵活的格式，具有调节图像质量的功能，允许用不同的压缩比例对文件进行压缩，支持多种压缩级别，压缩比率通常在 10：1 到 40：1 之间，压缩比越大，品质就越低；相反地，压缩比越小，品质就越好。比如可以把 1．37Mb 的 BMP 位图文件压缩至 20．3KB。当然也可以在图像质量和文件尺寸之间找到平衡点。JPEG 格式压缩的主要是高频信息，对色彩的信息保留较好，适合应用于互联网，可减少图像的传输时间，可以支持 24bit 真彩色，也普遍应用于需要连续色调的图像。
JPG/JPEG解码过程：
1. 从文件头读出文件的相关信息
JPEG文件数据分为文件头和图像数据两大部分，其中文件头记录了图像的版本、长宽、采样因子、量化表、哈夫曼表等重要信息。所以解码前必须将文件头信息读出，以备图像数据解码过程之用。
2. 从图像数据流读取一个最小编码单元（MCU），并提取出里边的各个颜色分量单元
3. 将颜色分量单元从数据流恢复成矩阵数据
使用文件头给出的哈夫曼表，对分割出来的颜色分量单元进行解码，将其恢复成8*8的数据矩阵
4. 8*8数据矩阵进一步解码
此部分解码工作以8*8的数据矩阵为单位，其中包括相邻矩阵的直流系数差分解码、使用文件头给出的量化表反量化数据、反Zig-zag编码、隔行正负纠正、反向离散余弦变换等5个步骤，最终输出仍然是一个8*8的数据矩阵。
5. 颜色系统YCrCb向RGB转换
将一个MCU的各个颜色分量单元解码结果整合起来，将图像颜色系统从YCrCb向RGB转换。
6. 排列整合各个MCU的解码数据
不断读取数据流中的MCU并对其解码，直至读完所有MCU为止，将各MCU解码后的数据正确排列成完整的图像。
GIF图片格式：
GIF（Graphics Interchange Format）是CompuServe公司开发的图像文件存储格式，1987年开发的GIF文件格式版本号是GIF87a，1989年进行了扩充，扩充后的版本号定义为GIF89a。
GIF图像文件以数据块（block）为单位来存储图像的相关信息。一个GIF文件有表示图形/图像的数据块、数据子块以及显示图形/图像的控制信息块组成，称为GIF数据流（Data Stream）。数据流中的所有控制信息块和数据块都必须在文件头（Header）和文件结束块（Trailer）之间。
GIF 文件格式采用了 LZW(Lempel-Ziv Walch)压缩算法来存储图像数据，定义了允许用户为 图像设置背景的透明(transparency)属性。此外，GIF 文件格式可在一个文件中存放多幅彩色图 形/图像。如果在 GIF 文件中存放有多幅图，它们可以像演幻灯片那样显示或者像动画那样演示。（动态图片形成的原因）
一个 GIF 文件的结构可分为文件头(File Header)、GIF 数据流(GIF Data Stream)和文件终结器(Trailer)三个部分。文件头包含 GIF 文件署名(Signature)和版本号(Version)；GIF 数据流由控制标识符、图象块(Image Block)和其他的一些扩展块组成；文件终结器只有一个值为 0x3B 的字符（';'）表示文件结束。
2. 实验程序
实验功能：
开机的时候先检测字库，然后检测SD卡是否存在，如果 SD 卡存在，则开始查找 SD 卡根目录下的 PICTURE 文件夹，如果找到则显示该文件夹下面的图片文件（支 持 bmp、jpg、jpeg 或 gif 格式），循环显示，通过按 KEY0 和 KEY2 可以快速浏览下一张和上 一张，KEY_UP 按键用于暂停/继续播放，DS1 用于指示当前是否处于暂停状态。
2.1 main.c
#include "stm32f4xx.h"
#include "delay.h"
#include "usart.h"
#include "LED.h"
#include "lcd.h"
#include "Key.h"
#include "usmart.h"
#include "SRAM.h"
#include "Malloc.h"
#include "SDIO_Card.h"
#include "W25Q128.h"
#include "ff.h"
#include "exfuns.h"
#include "fontupd.h"
#include "text.h"
#include "piclib.h"
#include "string.h"
#include "math.h"
//LCD状态设置函数
void led_set(u8 sta)//只要工程目录下有usmart调试函数，主函数就必须调用这两个函数
{
LED1=sta;
}
//函数参数调用测试函数
void test_fun(void(*ledset)(u8),u8 sta)
{
led_set(sta);
}
//得到path路径下,目标文件的总个数
//path:路径
//返回值:总有效文件数
u16 pic_get_tnum(u8 *path)
{
u8 res;
u16 rval=0;
DIR tdir; //临时目录
FILINFO tfileinfo; //临时文件信息
u8 *fn;
res=f_opendir(&tdir,(const TCHAR*)path); //打开目录
tfileinfo.lfsize=_MAX_LFN*2+1; //长文件名最大长度
tfileinfo.lfname=mymalloc(SRAMIN,tfileinfo.lfsize);//为长文件缓存区分配内存
if(res==FR_OK && tfileinfo.lfname!=NULL)
{
while(1)//查询总的有效文件数
{
res=f_readdir(&tdir,&tfileinfo); //读取目录下的一个文件
if(res!=FR_OK||tfileinfo.fname[0]==0)
break; //错误了/到末尾了,退出
fn=(u8*)(*tfileinfo.lfname?tfileinfo.lfname:tfileinfo.fname);
res=f_typetell(fn);
if((res&0XF0)==0X50)//取高四位,看看是不是图片文件
{
rval++;//有效文件数增加1
}
}
}
return rval;
}
int main(void)
{
u8 res;
DIR picdir; //图片目录
FILINFO picfileinfo;//文件信息
u8 *fn; //长文件名
u8 *pname; //带路径的文件名
u16 totpicnum; //图片文件总数
u16 curindex; //图片当前索引
u8 key; //键值
u8 pause=0; //暂停标记
u8 t;
u16 temp;
u16 *picindextbl; //图片索引表
NVIC_PriorityGroupConfig(NVIC_PriorityGroup_2);//设置系统中断优先级分组2
delay_init(168); //初始化延时函数
uart_init(115200); //初始化串口波特率为115200
LED_Init(); //初始化LED
usmart_dev.init(84); //初始化USMART
LCD_Init(); //LCD初始化
Key_Init(); //按键初始化
W25Q128_Init(); //初始化W25Q128
my_mem_init(SRAMIN); //初始化内部内存池
my_mem_init(SRAMCCM); //初始化CCM内存池
exfuns_init(); //为fatfs相关变量申请内存
f_mount(fs[0],"0:",1); //挂载SD卡
f_mount(fs[1],"1:",1); //挂载FLASH.
POINT_COLOR=RED;
while(font_init()) //检查字库
{
LCD_ShowString(30,50,200,16,16,"Font Error!");
delay_ms(200);
LCD_Fill(30,50,240,66,WHITE);//清除显示
delay_ms(200);
}
Show_Str(30,50,200,16,"Explorer STM32F4开发板",16,0);
Show_Str(30,70,200,16,"图片显示程序",16,0);
Show_Str(30,90,200,16,"KEY0:NEXT KEY1:PREV",16,0);
Show_Str(30,110,200,16,"WK_UP:PAUSE",16,0);
Show_Str(30,130,200,16,"正点原子@ALIENTEK",16,0);
Show_Str(30,150,200,16,"2023年20月23日",16,0);
while(f_opendir(&picdir,"0:/PICTURE"))//打开图片文件夹
{
Show_Str(30,170,240,16,"PICTURE文件夹错误!",16,0);
delay_ms(200);
LCD_Fill(30,170,240,186,WHITE);//清除显示
delay_ms(200);
}
totpicnum=pic_get_tnum("0:/PICTURE"); //得到总有效文件数
while(totpicnum==NULL)//图片文件为0
{
Show_Str(30,170,240,16,"没有图片文件!",16,0);
delay_ms(200);
LCD_Fill(30,170,240,186,WHITE);//清除显示
delay_ms(200);
}
picfileinfo.lfsize=_MAX_LFN*2+1; //长文件名最大长度
picfileinfo.lfname=mymalloc(SRAMIN,picfileinfo.lfsize); //为长文件缓存区分配内存
pname=mymalloc(SRAMIN,picfileinfo.lfsize); //为带路径的文件名分配内存
picindextbl=mymalloc(SRAMIN,2*totpicnum); //申请2*totpicnum个字节的内存,用于存放图片索引
while(picfileinfo.lfname==NULL||pname==NULL||picindextbl==NULL)//内存分配出错
{
Show_Str(30,170,240,16,"内存分配失败!",16,0);
delay_ms(200);
LCD_Fill(30,170,240,186,WHITE);//清除显示
delay_ms(200);
}
//记录索引
res=f_opendir(&picdir,"0:/PICTURE"); //打开目录
if(res==FR_OK)
{
curindex=0;//当前索引为0
while(1)//全部查询一遍
{
temp=picdir.index; //记录当前index
res=f_readdir(&picdir,&picfileinfo); //读取目录下的一个文件
if(res!=FR_OK||picfileinfo.fname[0]==0)break; //错误了/到末尾了,退出
fn=(u8*)(*picfileinfo.lfname?picfileinfo.lfname:picfileinfo.fname);
res=f_typetell(fn);
if((res&0XF0)==0X50)//取高四位,看看是不是图片文件
{
picindextbl[curindex]=temp;//记录索引
curindex++;
}
}
}
Show_Str(30,170,240,16,"开始显示...",16,0);
delay_ms(1500);
piclib_init(); //初始化画图
curindex=0; //从0开始显示
res=f_opendir(&picdir,(const TCHAR*)"0:/PICTURE"); //打开目录
while(res==FR_OK)//打开成功
{
dir_sdi(&picdir,picindextbl[curindex]); //改变当前目录索引
res=f_readdir(&picdir,&picfileinfo); //读取目录下的一个文件
if(res!=FR_OK||picfileinfo.fname[0]==0)break; //错误了/到末尾了,退出
fn=(u8*)(*picfileinfo.lfname?picfileinfo.lfname:picfileinfo.fname);
strcpy((char*)pname,"0:/PICTURE/"); //复制路径(目录)
strcat((char*)pname,(const char*)fn); //将文件名接在后面
LCD_Clear(BLACK);
ai_load_picfile(pname,0,0,lcddev.width,lcddev.height,1);//显示图片
Show_Str(2,2,240,16,pname,16,1); //显示图片名字
t=0;
while(1)
{
key=KEY_Scan(0); //扫描按键
if(t>250)key=1; //模拟一次按下KEY0
if((t%20)==0)LED0=!LED0;//LED0闪烁,提示程序正在运行.
if(key==2) //上一张
{
if(curindex)curindex--;
else curindex=totpicnum-1;
break;
}else if(key==1)//下一张
{
curindex++;
if(curindex>=totpicnum)curindex=0;//到末尾的时候,自动从头开始
break;
}else if(key==4)
{
pause=!pause;
LED1=!pause; //暂停的时候LED1亮.
}
if(pause==0)t++;
delay_ms(10);
}
res=0;
}
myfree(SRAMIN,picfileinfo.lfname); //释放内存
myfree(SRAMIN,pname); //释放内存
myfree(SRAMIN,picindextbl); //释放内存
}
2.2 piclib.c
#include "piclib.h"
#include "lcd.h"
_pic_info picinfo; //图片信息
_pic_phy pic_phy; //图片显示物理接口
//
//lcd.h没有提供划横线函数,需要自己实现
void piclib_draw_hline(u16 x0,u16 y0,u16 len,u16 color)
{
if((len==0)||(x0>lcddev.width)||(y0>lcddev.height))
return;
LCD_Fill(x0,y0,x0+len-1,y0,color);
}
//填充颜色
//x,y:起始坐标
//width，height：宽度和高度。
//*color：颜色数组
void piclib_fill_color(u16 x,u16 y,u16 width,u16 height,u16 *color)
{
LCD_Color_Fill(x,y,x+width-1,y+height-1,color); //x+width-1,y+height-1 是一个矩形区域，在这个区域内进行颜色的填充
}
//
//画图初始化,在画图之前,必须先调用此函数
//指定画点/读点
void piclib_init(void)
{
pic_phy.read_point=LCD_ReadPoint; //读点函数实现
pic_phy.draw_point=LCD_Fast_DrawPoint; //画点函数实现
pic_phy.fill=LCD_Fill; //填充函数实现
pic_phy.draw_hline=piclib_draw_hline; //画线函数实现
pic_phy.fillcolor=piclib_fill_color; //颜色填充函数实现
picinfo.lcdwidth=lcddev.width; //得到LCD的宽度像素
picinfo.lcdheight=lcddev.height;//得到LCD的高度像素
picinfo.ImgWidth=0; //初始化宽度为0
picinfo.ImgHeight=0;//初始化高度为0
picinfo.Div_Fac=0; //初始化缩放系数为0
picinfo.S_Height=0; //初始化设定的高度为0
picinfo.S_Width=0; //初始化设定的宽度为0
picinfo.S_XOFF=0; //初始化x轴的偏移量为0
picinfo.S_YOFF=0; //初始化y轴的偏移量为0
picinfo.staticx=0; //初始化当前显示到的x坐标为0
picinfo.staticy=0; //初始化当前显示到的y坐标为0
}
//快速ALPHA BLENDING算法.
//src:源颜色
//dst:目标颜色
//alpha:透明程度(0~32)
//返回值:混合后的颜色.
u16 piclib_alpha_blend(u16 src,u16 dst,u8 alpha)
{
u32 src2;
u32 dst2;
//Convert to 32bit |-----GGGGGG-----RRRRR------BBBBB|
src2=((src<<16)|src)&0x07E0F81F;
dst2=((dst<<16)|dst)&0x07E0F81F;
//Perform blending R:G:B with alpha in range 0..32
//Note that the reason that alpha may not exceed 32 is that there are only
//5bits of space between each R:G:B value, any higher value will overflow
//into the next component and deliver ugly result.
dst2=((((dst2-src2)*alpha)>>5)+src2)&0x07E0F81F;
return (dst2>>16)|dst2;
}
//初始化智能画点
//内部调用
void ai_draw_init(void)
{
float temp,temp1;
temp=(float)picinfo.S_Width/picinfo.ImgWidth; //设定的宽度除以实际的宽度
temp1=(float)picinfo.S_Height/picinfo.ImgHeight; //设定的高度除以实际的高度
if(temp1)
temp1=1;
//使图片处于所给区域的中间
picinfo.S_XOFF+=(picinfo.S_Width-temp1*picinfo.ImgWidth)/2;
picinfo.S_YOFF+=(picinfo.S_Height-temp1*picinfo.ImgHeight)/2;
temp1*=8192;//扩大8192倍
picinfo.Div_Fac=temp1;
picinfo.staticx=0xffff;
picinfo.staticy=0xffff;//放到一个不可能的值上面
}
//判断这个像素是否可以显示
//(x,y) :像素原始坐标
//chg :功能变量.
//返回值:0,不需要显示.1,需要显示
u8 is_element_ok(u16 x,u16 y,u8 chg)
{
if(x!=picinfo.staticx||y!=picinfo.staticy) //x不等于当前显示到的坐标或者y不等于当前显示到的坐标
{
if(chg==1)
{
picinfo.staticx=x;
picinfo.staticy=y;
}
return 1;
}
else
return 0;
}
//智能画图
//FileName:要显示的图片文件 BMP/JPG/JPEG/GIF
//x,y,width,height:坐标及显示区域尺寸
//fast:使能jpeg/jpg小图片(图片尺寸小于等于液晶分辨率)快速解码,0,不使能;1,使能.
//图片在开始和结束的坐标点范围内显示
u8 ai_load_picfile(const u8 *filename,u16 x,u16 y,u16 width,u16 height,u8 fast)
{
u8 res;//返回值
u8 temp;
if((x+width)>picinfo.lcdwidth)return PIC_WINDOW_ERR; //x坐标超范围了.
if((y+height)>picinfo.lcdheight)return PIC_WINDOW_ERR; //y坐标超范围了.
//得到显示方框大小
if(width==0||height==0)return PIC_WINDOW_ERR; //窗口设定错误
picinfo.S_Height=height;
picinfo.S_Width=width;
//显示区域无效
if(picinfo.S_Height==0||picinfo.S_Width==0)
{
picinfo.S_Height=lcddev.height;
picinfo.S_Width=lcddev.width;
return FALSE;
}
if(pic_phy.fillcolor==NULL)fast=0;//颜色填充函数未实现,不能快速显示
//显示的开始坐标点
picinfo.S_YOFF=y;
picinfo.S_XOFF=x;
//文件名传递
temp=f_typetell((u8*)filename); //得到文件的类型
switch(temp)
{
case T_BMP:
res=stdbmp_decode(filename); //解码bmp
break;
case T_JPG:
case T_JPEG:
res=jpg_decode(filename,fast); //解码JPG/JPEG
break;
case T_GIF:
res=gif_decode(filename,x,y,width,height); //解码gif
break;
default:
res=PIC_FORMAT_ERR; //非图片格式!!!
break;
}
return res;
}
//动态分配内存
void *pic_memalloc (u32 size)
{
return (void*)mymalloc(SRAMIN,size);
}
//释放内存
void pic_memfree (void* mf)
{
myfree(SRAMIN,mf);
}
2.3 piclib.h
#ifndef __PICLIB_H
#define __PICLIB_H
#include "sys.h"
#include "lcd.h"
#include "Malloc.h"
#include "ff.h"
#include "exfuns.h"
#include "bmp.h"
#include "tjpgd.h"
#include "gif.h"
#define PIC_FORMAT_ERR 0x27 //格式错误
#define PIC_SIZE_ERR 0x28 //图片尺寸错误
#define PIC_WINDOW_ERR 0x29 //窗口设定错误
#define PIC_MEM_ERR 0x11 //内存错误
///
#ifndef TRUE
#define TRUE 1
#endif
#ifndef FALSE
#define FALSE 0
#endif
//图片显示物理层接口
//在移植的时候,必须由用户自己实现这几个函数
typedef struct
{
u16(*read_point)(u16,u16); //u16 read_point(u16 x,u16 y) 读点函数
void(*draw_point)(u16,u16,u16); //void draw_point(u16 x,u16 y,u16 color) 画点函数
void(*fill)(u16,u16,u16,u16,u16); ///void fill(u16 sx,u16 sy,u16 ex,u16 ey,u16 color) 单色填充函数
void(*draw_hline)(u16,u16,u16,u16); //void draw_hline(u16 x0,u16 y0,u16 len,u16 color) 画水平线函数
void(*fillcolor)(u16,u16,u16,u16,u16*); //void piclib_fill_color(u16 x,u16 y,u16 width,u16 height,u16 *color) 颜色填充
}_pic_phy;
extern _pic_phy pic_phy;
///
//图像信息
typedef struct
{
u16 lcdwidth; //LCD的宽度
u16 lcdheight; //LCD的高度
u32 ImgWidth; //图像的实际宽度和高度
u32 ImgHeight;
u32 Div_Fac; //缩放系数 (扩大了8192倍的)
u32 S_Height; //设定的高度和宽度
u32 S_Width;
u32 S_XOFF; //x轴和y轴的偏移量
u32 S_YOFF;
u32 staticx; //当前显示到的ｘｙ坐标
u32 staticy;
}_pic_info;
extern _pic_info picinfo;//图像信息
///
void piclib_init(void); //初始化画图
u16 piclib_alpha_blend(u16 src,u16 dst,u8 alpha); //alphablend处理
void ai_draw_init(void); //初始化智能画图
u8 is_element_ok(u16 x,u16 y,u8 chg); //判断像素是否有效
u8 ai_load_picfile(const u8 *filename,u16 x,u16 y,u16 width,u16 height,u8 fast);//智能画图
void *pic_memalloc (u32 size); //pic申请内存
void pic_memfree (void* mf); //pic释放内存
///
#endif