【图像处理】使用SDL预览webp图片
2024-09-07 16:50:19
写在前面的话
WebP是Google开发的一种图像格式，支持图像数据的有损和无损压缩。保留动画和alpha透明通道数据。
可以创建和JPEG、PNG和GIF图像格式在质量相同或质量更高，但是数据更小的一种图像格式。
如下简单的分析一下webp图像格式，并使用sdl显示图片。
webp项目地址：https://github.com/webmproject/libwebp
sdl项目地址：https://libsdl.org/
webp格式图片说明
webp格式图像数据由两部分组成，RIFF头和图像负载信息。
RIFF头信息由21个字节组成。
0-3 四个字节是 RIFF 四个字符，表示 资源交换格式Resource Interchange File Format的简写。
4-7 四个字节是 WEBP文件的全部长度，这个长度包含RIFF
8-11 四个字节是 资源交换格式的名称，填WEBP这四个字符
12-15 四个字节是数据块Chunk的负载信息的编码格式，取值有VP8表示无损vp8压缩，VP8L表示有损vp8压缩
16-19 四个字节是有损压缩时的VP8数据负载信息的长度
20-以后数vp8格式的图像数据帧。
VP8格式的定义如下
struct VP8Io {
// set by VP8GetHeaders()
int width, height; // picture dimensions, in pixels (invariable).
// These are the original, uncropped dimensions.
// The actual area passed to put() is stored
// in mb_w / mb_h fields.
// set before calling put()
int mb_y; // position of the current rows (in pixels)
int mb_w; // number of columns in the sample
int mb_h; // number of rows in the sample
const uint8_t* y, *u, *v; // rows to copy (in yuv420 format)
int y_stride; // row stride for luma
int uv_stride; // row stride for chroma
const uint8_t* a;
};
VP8使用14位表示图像的宽和高，因此webp格式图像宽高最大是2^14 = 16384像素。
VP8的每一个像素的值是通过 左上top-left 上top 右上top-right 和左left这4个像素做预测得到。
预测的方法如下
// L = left pixel, T = top pixel, TL = top left pixel. // ARGB component estimates for prediction.
int pAlpha = ALPHA(L) + ALPHA(T) - ALPHA(TL);
int pRed = RED(L) + RED(T) - RED(TL);
int pGreen = GREEN(L) + GREEN(T) - GREEN(TL);
int pBlue = BLUE(L) + BLUE(T) - BLUE(TL); // Manhattan distances to estimates for left and top pixels.
int pL = abs(pAlpha - ALPHA(L)) + abs(pRed - RED(L)) +
abs(pGreen - GREEN(L)) + abs(pBlue - BLUE(L));
int pT = abs(pAlpha - ALPHA(T)) + abs(pRed - RED(T)) +
abs(pGreen - GREEN(T)) + abs(pBlue - BLUE(T));
VP8的详细分析，后面增加一篇对应的文章分析。
环境准备
centos环境可以先安装png tiff jpeg和sdl
yum install libjpeg-devel
yum install libpng-devel
yum install libtiff-devel
osx系统可以使用brew命令按照对应的包
使用cmake编译webp项目后会生成如下小工具
cwebp 工具可以将其他格式图片转成webp图片
./cwebp -h
Usage: cwebp [options] -q quality input.png -o output.webp where quality is between 0 (poor) to 100 (very good).
Typical value is around 80.
dwebp 工具可以将webp图片转成png jpg tiff ppm等格式
./dwebp -h
Usage: dwebp in_file [options] [-o out_file] -pam ......... save the raw RGBA samples as a color PAM
-ppm ......... save the raw RGB samples as a color PPM
-bmp ......... save as uncompressed BMP format
-tiff ........ save as uncompressed TIFF format
-pgm ......... save the raw YUV samples as a grayscale PGM
file with IMC4 layout
-yuv ......... save the raw YUV samples in flat layout
vwebp_sdl 工具可以将通过sdl显示webp图片
做SDL显示的一个例子
首先找一张png的图片，将这个图片转成webp格式的图像。
./cwebp leopard2.png -o leopard2.webp Saving file 'leopard2.webp'
File: leopard2.png
Dimension: 842 x 1134
Output: 59610 bytes Y-U-V-All-PSNR 40.28 44.99 46.35 41.45 dB
(0.50 bpp)
block count: intra4: 2898 (77.01%)
intra16: 865 (22.99%)
skipped: 1 (0.03%)
bytes used: header: 203 (0.3%)
mode-partition: 13872 (23.3%)
Residuals bytes |segment 1|segment 2|segment 3|segment 4| total
macroblocks: | 12%| 37%| 10%| 42%| 3763
quantizer: | 36 | 32 | 27 | 16 |
filter level: | 11 | 8 | 12 | 15 |
如下是png格式图片是webp格式图片大小的3.4倍，png格式的图像大小是1.4M，webp格式图像的大小是58k
1.4M 9 8 16:29 leopard2.png
58K 9 8 16:30 leopard2.webp
显示webp图片
./vwebp_sdl leopard2.webp
SDL图像显示原理
SDL库在的图像显示表面接收RGB或者YUV格式的图像数据。
因此，若显示webp格式的图像，需要将webp格式的图像转成RGB或者YUV格式，将图像数据传递给SDL的显示表面实现显示效果。
注：其他格式的图片也是同样的做法，其他格式转成RGB或者YUV格式数据交给SDL显示表面。
显示逻辑如下：
结合SDL显示图像的原理如下：
SDL显示webp的主要代码
int WebpToSDL(const char* data, unsigned int data_size) {
int ok = 0;
// 第一步 声明webp的配置和属性
VP8StatusCode status;
WebPDecoderConfig config;
WebPBitstreamFeatures* const input = &config.input;
WebPDecBuffer* const output = &config.output;
SDL_Surface* screen = NULL;
SDL_Surface* surface = NULL;
// 第二步 初始化webp解码配置信息
if (!WebPInitDecoderConfig(&config)) {
fprintf(stderr, "Library version mismatch!\n");
return 0;
}
if (!init_ok) {
SDL_Init(SDL_INIT_VIDEO);
init_ok = 1;
}
// 第三步 获取webp图像数据
status = WebPGetFeatures((uint8_t*)data, (size_t)data_size, &config.input);
if (status != VP8_STATUS_OK) goto Error;
screen = SDL_SetVideoMode(input->width, input->height, 32, SDL_SWSURFACE);
if (screen == NULL) {
fprintf(stderr, "Unable to set video mode (32bpp %dx%d)!\n",
input->width, input->height);
goto Error;
}
surface = SDL_CreateRGBSurface(SDL_SWSURFACE,
input->width, input->height, 32,
0x000000ffu, // R mask
0x0000ff00u, // G mask
0x00ff0000u, // B mask
0xff000000u); // A mask
if (surface == NULL) {
fprintf(stderr, "Unable to create %dx%d RGBA surface!\n",
input->width, input->height);
goto Error;
}
if (SDL_MUSTLOCK(surface)) SDL_LockSurface(surface);
#if SDL_BYTEORDER == SDL_BIG_ENDIAN
output->colorspace = MODE_BGRA;
#else
output->colorspace = MODE_RGBA;
#endif
output->width = surface->w;
output->height = surface->h;
output->u.RGBA.rgba = surface->pixels;
output->u.RGBA.stride = surface->pitch;
output->u.RGBA.size = surface->pitch * surface->h;
output->is_external_memory = 1;
// 第四步 解码webp格式成rgb格式的图像数据
status = WebPDecode((const uint8_t*)data, (size_t)data_size, &config);
if (status != VP8_STATUS_OK) {
fprintf(stderr, "Error decoding image (%d)\n", status);
goto Error;
}
if (SDL_MUSTLOCK(surface)) SDL_UnlockSurface(surface);
// 第五步 将rgb的图像数据显示到SDL的目标表面，实现显示
if (SDL_BlitSurface(surface, NULL, screen, NULL) ||
SDL_Flip(screen)) {
goto Error;
}
ok = 1;
Error:
SDL_FreeSurface(surface);
SDL_FreeSurface(screen);
WebPFreeDecBuffer(output);
return ok;
}
参考材料：
https://developers.google.cn/speed/webp/docs/riff_container
done.
祝玩的开心~
最新文章
- EditPlus快捷键
- JS 下拉菜单
- PHP编写的图片验证码类文件分享方法
- C# 用正则表达式替换字符串中所有特殊字符
- ARP防火墙绑定网关MAC地址预防ARP攻击和P2P终结者
- Android应用开发学习之画廊视图
- c语言实现BMP图像转换为灰度图
- JUC锁机制
- Angular2，React集成
- iOS 调试心得
- Android酷炫有用的开源框架
- linux下测试磁盘的读写IO速度
- hdu5860 Death Sequence
- MongoDB学习目录
- java StringBuilder和StringBuffer 用法
- Javascript：一些基本语法
- poj1019（打表预处理+数学）
- MySQL之多表查询练习 与基本查询基础
- GO入门——4. 数组、切片与map
- Axure 实现批量的勾选和反选