音频和视频入门 - 18 - 手动生成 GIF 图像
* 音视频入门文章目录 *
GIF 编码知识
GIF 包含的数据块:
-
文件头(Header)
-
逻辑屏幕标识符(Logical Screen Descriptor)
-
全局颜色表(Global Color Table)
-
Application Extension
-
Comment Extension
-
图形控制扩展(Graphic Control Extension)
-
图像标识符(Image Descriptor)
-
局部颜色表(Local Color Table)
-
基于颜色表的图像数据(Image Data)
-
Plain Text Extension
-
文件结尾(Trailer)
GIF 编码步骤
今天的目标是做出一张尺寸 700x700、7 个颜色画面切换的 GIF 动画。
文件头(Header)
GIF 的前 6 个字节内容是 GIF 的署名和版本号。有两个版本 GIF87a
GIF89a
,GIF89a
版本才有多帧动画,所有这里使用 89a
版本。
示例代码:
// GIF 文件头,6 个字节内容是 GIF 的署名和版本号
uint8_t gif_header[] = {0x47, 0x49, 0x46, 0x38, 0x39, 0x61};
fwrite(gif_header, 6, 1, gif_file);
逻辑屏幕标识符(Logical Screen Descriptor)
从上一篇 音视频入门-17-GIF文件格式详解 我们知道:
逻辑屏幕标识符(7 个字节):
-
屏幕逻辑宽度:2 字节;
-
屏幕逻辑高度:2 字节;
-
打包值,大小为 1 字节
- m - 全局颜色表标志,1 bit;
- cr - 颜色深度,3 bit;(x: 可忽略)
- s - 分类标志, 1 bit; (x: 不使用,设为 0)
- pixel - 全局颜色列表大小,3 bit;
-
背景颜色索引: 1 字节;
-
像素宽高比: 1 字节;(x: 不使用,设为 0)
示例代码:
// 逻辑屏幕标识符
uint16_t gif_width = 700;
uint16_t gif_height = 700;
// 0xF2 = 1 1 1 1 0 0 1 0
uint8_t gif_logical_screen_pack_byte = 0xF2;
uint8_t gif_bg_color_index = 0;
uint8_t gif_pixel_aspect = 0;
fputc(gif_width >> 0, gif_file); // width low 8
fputc(gif_width >> 8, gif_file); // width high 8
fputc(gif_height >> 0, gif_file); // height low 8
fputc(gif_height >> 8, gif_file); // height high 8
fputc(gif_logical_screen_pack_byte, gif_file);
fputc(gif_bg_color_index, gif_file);
fputc(gif_pixel_aspect, gif_file);
全局颜色表(Global Color Table)
每个颜色索引由三字节组成,按 RGB 顺序排列。
由 【逻辑屏幕标识符】可知,颜色的索引数(2^(pixel+1))是 2 的倍数,如果图片颜色数目不够要补足。
比如,我们的图片用了 7 个颜色,颜色索引数是 8,所以最后再加一个颜色(占位,不使用)。
示例代码:
// 颜色表
uint32_t rainbowColors[] = {
0XFF0000, // 赤
0XFFA500, // 橙
0XFFFF00, // 黄
0X00FF00, // 绿
0X007FFF, // 青
0X0000FF, // 蓝
0X8B00FF, // 紫
0X000000 // 黑
};
// 全局颜色表、
for(int i = 0; i < 8; i++) {
// 根据颜色索引取出颜色表中的颜色
uint32_t color_rgb = rainbowColors[i];
// 当前颜色 R 分量
uint8_t R = (color_rgb & 0xFF0000) >> 16;
// 当前颜色 G 分量
uint8_t G = (color_rgb & 0x00FF00) >> 8;
// 当前颜色 B 分量
uint8_t B = color_rgb & 0x0000FF;
fputc(R, gif_file);
fputc(G, gif_file);
fputc(B, gif_file);
}
Application Extension
Application Extension 这 19 个字节基本上 GIF 都一样。
0x21, 0xFF, 0x0B, 0x4E, 0x45, 0x54, 0x53, 0x43, 0x41, 0x50, 0x45, 0x32, 0x2E, 0x30, 0x03, 0x01, 0x00, 0x00, 0x00
代表的内容是 NETSCAPE2.0
示例代码:
// Application Extension
uint8_t gif_application_extension[] = {0x21, 0xFF, 0x0B, 0x4E, 0x45, 0x54, 0x53, 0x43, 0x41, 0x50, 0x45, 0x32, 0x2E, 0x30, 0x03, 0x01, 0x00, 0x00, 0x00};
fwrite(gif_application_extension, 19, 1, gif_file);
Comment Extension
这里允许你将 ASCII 文本嵌入到 GIF 文件,有时被用来图像描述、图像信贷或其他人类可读的元数据,如图像捕获的 GPS 定位。
0x21, 0xFE, 0x20, 0x43, 0x72, 0x65, 0x61, 0x74, 0x65, 0x64, 0x20, 0x77, 0x69, 0x74, 0x68, 0x20, 0x65, 0x7A, 0x67, 0x69, 0x66, 0x2E, 0x63, 0x6F, 0x6D, 0x20, 0x47, 0x49, 0x46, 0x20, 0x6D, 0x61, 0x6B, 0x65, 0x72, 0x00
代表的内容是 Created with ezgif.com GIF maker
示例代码:
// Comment Extension
// Created with ezgif.com GIF maker
uint8_t gif_comment_extension[] = {0x21, 0xFE, 0x20, 0x43, 0x72, 0x65, 0x61, 0x74, 0x65, 0x64, 0x20, 0x77, 0x69, 0x74, 0x68, 0x20, 0x65, 0x7A, 0x67, 0x69, 0x66, 0x2E, 0x63, 0x6F, 0x6D, 0x20, 0x47, 0x49, 0x46, 0x20, 0x6D, 0x61, 0x6B, 0x65, 0x72, 0x00};
fwrite(gif_comment_extension, 36, 1, gif_file);
图形控制扩展(Graphic Control Extension)
我们的 GIF 不使用处置方法
不使用透明色
图像延迟 50
。
所以,这里就是 0x21, 0xF9, 0x04, 0x00, 0x32, 0x00, 0xFF, 0x00
。
示例代码:
// 图形控制扩展
uint8_t gif_graphic_control_extension[] = {0x21, 0xF9, 0x04, 0x00, 0x32, 0x00, 0xFF, 0x00};
fwrite(gif_graphic_control_extension, 8, 1, gif_file);
图像标识符(Image Descriptor)
我们的 GIF 没有局部颜色表
顺序排列
局部颜色表大小为 0
。
所以,这里就是 0x2C, 0x00, 0x00, 0x00, 0x00, 0xBC, 0x02, 0xBC, 0x02, 0x00
。
示例代码:
// 图像标识符
uint8_t gif_image_descriptor[] = {0x2C, 0x00, 0x00, 0x00, 0x00, 0xBC, 0x02, 0xBC, 0x02, 0x00};
fwrite(gif_image_descriptor, 10, 1, gif_file);
局部颜色表(Local Color Table)
如果有局部颜色表,则跟 全局颜色表(Global Color Table) 一样的格式。
基于颜色表的图像数据(Image Data)
这里是最关键的图像数据,生成步骤如下:
- 1.根据全局颜色表或者局部颜色表,生成一张图像的颜色索引数据
- 2.使用 LZW 算法压缩上一步生成的数据
- 3.将压缩后的数据按照格式写入文件
1.生成索引数据
我们要生成的 GIF 尺寸 700x700,有 7 张图像,每张图像一个颜色 赤
橙
黄
绿
青
蓝
紫
;
颜色已经写入全局颜色表中;
每个颜色索引 1 字节;
示例代码:
// 基于颜色表的图像数据
uint8_t *gif_one_frame_raw = malloc(700 * 700);
memset(gif_one_frame_raw, i, 700*700);
2.LZW 压缩数据
LZW 压缩算法不在本次研究范围,直接用即可。
// GIF 一帧图像的数据压缩后大小
unsigned long compressed_size;
// GIF 一帧图像的数据解压后的数据
unsigned char *img;
lzw_compress_gif(
3,
700*700,
gif_one_frame_raw,
&compressed_size,
&img
);
3.按照格式写入文件
第一个字节表示 LZW 编码初始表大小的位数,用于使用 LZW 算法解压数据。
后面的是图像数据块:
每个数据块第一个字节表示数据块大小(不包括这个字节)
数据块后面的一个字节表示后续数据块大小
当数据块后面的一个字节是 0 ,表示数据结束了
示例代码:
fputc(0x03, gif_file);
unsigned long current_index = 0;
while (current_index < compressed_size) {
if((current_index + 0xFF) >= compressed_size) {
unsigned long diff = compressed_size - current_index;
fputc(diff, gif_file);
fwrite(img+current_index, diff, 1, gif_file);
fputc(0x00, gif_file);
current_index += diff;
} else {
fputc(0xFF, gif_file);
fwrite(img+current_index, 0xFF, 1, gif_file);
current_index += 0xFF;
}
}
Plain Text Extension
这个特性不起作用; 浏览器和图片处理应用程序,如 Photoshop 忽略它, GIFLIB 并不试图解释它。
所以直接忽略。
文件结尾(Trailer)
标识 GIF 文件结束,固定值 0x3B。
当解析程序读到 0x3B 时,文件终结。
示例代码:
// GIF 文件结束: 0x3B
fputc(0x3B, gif_file);
查看 GIF
以上完整代码在 binglingziyu/audio-video-blog-demos 可以获取。
运行代码,生成 GIF 图片:
代码:
audio-video-blog-demos
参考资料:
What's In A GIF
Gif 89a specification
GIF 格式解析
GIF 图片原理和储存结构
Gif 图片格式完全理解
GIF 文件格式详解
GIF 图形文件格式文档
GIF 文件格式详解
LZW 压缩算法——简明原理与实现
github.com/jefftime/lzw
https://github.com/jcraveiro
LZW compressor / decompressor
ASCII Codes Table
上一篇: 电影制作软件应用程序
推荐阅读
-
人工智能制作 "外星人 "纪录片!人工智能正在改变电影和电视行业!-Runway ML:一个在线平台,任何人都可以使用机器学习来创建和编辑视频、图像、音频等。电影中的大部分场景和动画都是通过 Runway ML 生成的。 Elevenlabs:一个在线平台,任何人都可以利用自然语言处理和语音合成技术创建和编辑语音。电影中的旁白就是通过 Elevenlabs 生成的。 前景和影响
-
aps是什么意思_不同的富士APS-C画幅微单区别在哪里,档次是怎么划分的?-X-A系列原本指的是富士的入门级微单,最大的特点是没有使用富士X-Trans™CMOS 传感器,目前在售的有两款,分别是XA5和XA7。 富士(FUJIFILM)X-A5/XA5 15-45套机 富士(FUJIFILM)X-A7/XA7 15-45套机 目前这两款相机都处于历史最低价附近,XA5套机2699元,XA7套机3999元。XA5就是一个标准的入门级相机,定位就是时尚小巧自拍,在2699这个价位不要对它的性能有太多的奢求。 XA7价格来到了3999元,这就很有意思了,富士把入门型的相机价格推到了4000元,并且提供了自拍翻转屏和4K30P视频录制,这样一款相机就很有性价比了。 XE3是老款的中端相机,价格和入门级的XA7是一样的,都是3999元,这两款相机如何做选择呢?XE3有着更多的按键意味着更好的操控,但屏幕不是自拍翻转屏所以这点不如XA7好用。 要注意的是XE3用的是富士独有的X-Trans™CMOS III传感器,XA7是普通的2400万像素传感器,你可以理解为X-Trans才是富士的精髓。 富士(FUJIFILM)X-E3 15-45套机 当然,买新不买旧,XA7的新功能和自拍翻转屏可能会更适合你。 XT200是富士专门针对vlog市场推出的相机,其实之前的XA7也可以拍摄vlog,但XT200是富士官方宣传中的第一款vlog相机。数码防抖+3.5mm 麦克风口+自拍翻转屏+无裁切4K30P,这些都是XT200的优势,但这款相机也是普通的2400万像素传感器,没有用富士独有的X-Trans,可能是从价格角度考虑做了阉割吧。 富士(FUJIFILM)X-T200/XT200 微单相机 Vlog相机 富士XT30是我认为富士性价比最高的微单照相机,注意我说的是照相机。理由很简单,因为从拍照角度来看XT30和XTXT3几乎没有明显差距,主要是操控差了一些、视频性能大幅削弱,但好歹也是个有着双波轮+曝光补偿波轮+快门速度波轮的相机,操控方面不会太差的。视频方面也有着超采4K 30P的规格,支持F-log输出。 可以这么说,如果你只拍照,那么XT30是富士微单中性价比最高的,视频方面XT30也不差,只不过没有专业的10bit和4K60P而已。 富士(FUJIFILM)X-T30/XT30 15-45套机 XT3和XT4得放在一起说,这两款相机其实都挺好,420 10bit 4K60P的专业视频模式基本代表了APS-C画幅的上限水平。XT4还提升了电池续航增加了五轴防抖,配上富士独特的胶片滤镜,不管是拍照还是拍视频都非常优秀。 不要觉得这两款相机贵,同价位里能做到4K60P的微单也就是M43画幅的GGHGH5S,最便宜的G9机身也要7000多,这APS-C画幅的XT3机身接近8000也算合理价格范围内。除此之外的4K60P机身只有13998的松下S5和15999的佳能R6了。 富士(FUJIFILM)X-T3/XT3 1855套机 富士(FUJIFILM)X-T4/XT4 微单相机 套机(18-55mm) B站更新4K视频投稿后有很多人想拍摄4K升格,在很长一段时间里富士XT3和XT4是最优选,毕竟兼顾视频和拍照,对焦也还算能用。 X-Pro3和X-Pro2这两款微单可以算是旁轴相机,是富士官方意义上的旗舰级相机。从用料做工操控按键角度来说的确是旗舰级别,但视频性能方面只有4K30P,价格却比XT3还贵,可能这就是旁轴情怀带来的溢价吧。 富士(FUJIFILM)X-Pro3 微单相机 机身 黑色 我在之前的文章里提过很多次,有一些相机属于如果你想买你压根不会看测评,如果你犹豫那么这款相机不适合你,为什么这么说,因为有一些比较小众的相机可能在性能上并不好,但独特的外形、操控、体积、传承赋予了它独特的定位。譬如富士X-Pro系列微单就是旁轴的电子化,理光GR传承大师的扫街理念,尼康DF的外形源自胶片时代的相机,这些相机就不是针对大多数消费者的,定位就是小众。所以我说喜欢就买,不要考虑什么性能规格。 X100系列相机是一款不可换镜头的等效35mm旁轴数码相机,从外形看就是经典的复古造型。这两款相机和X-Pro3一样,如果你喜欢那就买,别犹豫, 你在市场上找不到同类型的其他数码相机,徕卡Q是28mm,索尼RX1R系列是35mm但外形不够复古,X100系列就是独特的你没有其他选择。 那么X100F和X100V该如何选择呢?X100F的镜头很一般甚至算不上好,如果我没记错的话和初代的X100是同款镜头,X100V的镜头是全新制作的很棒,X100V的机身性能也和XTX-Pro3差不多。 富士(FUJIFILM)X100F 数码相机 旁轴 2430万像素 富士(FUJIFILM)X100V 数码相机 旁轴 2610万像素 还是那句话,这两款相机也是那种如果你喜欢那就毫不犹豫下单的类型,而且这两款相机也没有竞品。 以前不推荐富士的原因是原厂镜头太贵,现在唯卓仕给富士出了四款可以自动对焦的大光圈镜头,覆盖35到130mm的焦段,可以基本满足人像摄影爱好者的需求。拍风景的话国产很多镜头厂商都有富士卡口的手动镜头可以选择,从这个角度来说富士微单就非常值得入手了。 和友商竞品相比:
-
旷视天元开源图像比对工具 MegSpot,助力图像算法研发 - 1.多样化图像比对:可提供叠加比对、拖拽比对等多种比对方式,支持缩放、移动等同步操作,并可生成 GIF 保存比对结果。2. 2.专业呈现:支持像素级图像查看、图像直方图、RGB 查看;支持预览亮度、对比度、饱和度、灰度等指标。3. 视频对比:Cognizant Megapixel 可提供多种图像对比方法,如拖放对比等。 3.视频对比:除了支持视屏的所有图像对比功能外,CCTV MegSpot 还支持同步回放、回放暂停和快进、回放速度设置等功能。 4.跨平台支持:CCTV MegSpot 提供对 Mac、Linux 和 Windows 系统的跨平台支持,借助 Electron 框架,可以低成本完成跨平台应用的开发,并保证各平台体验的一致性。 此外,央视网MegSpot支持跨平台自动更新和数据持久化,确保用户体验的连续性,并支持中、英、日三种语言:MegSpot为大尺寸图像文件的对比提供了本地解决方案。 MegSpot 是一种用于比较大型图像文件的本地解决方案。
-
音频和视频入门 - 18 - 手动生成 GIF 图像
-
腾讯视频直播 02-推流-美颜滤镜 同样,腾讯云提供了 setBeautyFilter 方法来设置美颜风格、磨皮程度、美白程度和泛红程度 //style 磨皮风格:0:平滑 1:自然 2:朦胧 //美容级别:0-9。值为 0 时关闭美颜效果。默认值:0,关闭美颜效果。 //美白级别:取值 0-9。值为 0 时,将关闭美白效果。默认值:0,关闭美白效果。 //ruddyLevel:取值范围为 0-9。值为 0 时关闭美白效果。默认值:0,关闭美白效果。 public boolean setBeautyFilter(int style, int beautyLevel, int whiteningLevel, int ruddyLevel);; public boolean setBeautyFilter(int style, int beautyLevel, int whiteningLevel, int ruddyLevel) 滤镜 setFilter 方法可以设置滤镜效果,滤镜本身是一个直方图文件。setSpecialRatio 方法可以设置滤镜的程度,从 0 到 1,越大滤镜效果越明显,默认值为 0.5。 Bitmap bitmap = BitmapUtils.decodeResource(getResources, R.drawable.langman); if (mLivePusher) if (mLivePusher ! = null) { mLivePusher.setFilter(bmp); } 控制摄像头 腾讯云 sdk 默认为前置摄像头(可以通过修改 TXLivePushConfig 的配置函数 setFrontCamera 来修改默认值),调用一次 switchCamera 就切换一次,注意切换摄像头前要确保 TXLivePushConfig 和 TXLivePusher 对象已经初始化。 mLivePushConfig.setFrontCamera(true); // 默认前置摄像头。 mLivePusher.switchCamera; //切换摄像头。 ⑦ 设置徽标水印 腾讯视频云目前支持两种设置水印的方式:一种是在流媒体 SDK 中设置水印,原理是在 SDK 中对视频进行编码前在画面中设置水印。另一种方式是在云端设置水印,即由云端解析视频并添加水印标识。 建议使用 SDK 添加水印,因为在云端添加水印会有问题。下面是添加水印的 SDK 介绍: //设置视频水印 mLivePushConfig.setWatermark(BitmapFactory.decodeResource(getResources,R.drawable.watermark), 10, 10); // 最后两个参数是视频的水印。 //最后两个参数是水印位置的 X 轴和 Y 轴坐标。 mLivePusher.setConfig(mLivePushConfig); 如果需要对水印图像的位置进行模型适配,则需要调用水印规范化接口。 /设置视频水印 mLivePushConfig.setWatermark(mBitmap, 0.02f, 0.05f, 0.2f); //参数为水印图像。 //参数包括水印图像的位图、水印位置的 X 轴坐标、水印位置的 Y 轴坐标和水印宽度。后三个参数的范围是 [0,1]。 // 最后两个参数是水印位置的 X 轴坐标和 Y 轴坐标。 mLivePusher.setConfig(mLivePushConfig); TXLivePushConfig 中的 setHardwareAcceleration 方法可以启用或禁用硬件编码。 if (mHWVideoEncode){ if (mLivePushConfig ! = null) { if (Build.VERSION.SDK_INT < 18){ Toast.makeText(getApplicationContext, "Hardware acceleration failed, current phone API level is too low (min 18)"、 Toast.LENGTH_SHORT).show; mHWVideoEncode = false; } } } } mLivePushConfig.setHardwareAcceleration(mHWVideoEncode ? TXLiveConstants.ENCODE_VIDEO_HARDWARE : TXLiveConstants.ENCODE_VIDEO_SOFTWARE); mLivePusher.setConfig(mLivePushConfig); // 如果您不确定何时启用硬件加速,建议将其设置为 ENCODE_VIDEO_AUTO。 // 默认情况下启用软件编码,但如果手机的 CPU 使用率超过 80% 或帧速率为 10,SDK 将自动切换到硬件编码。 ⑨ 后台推流 在常规模式下,一旦应用程序进入后台,摄像头捕捉数据的能力就会被 Android 禁用,这意味着 SDK 无法继续捕捉和编码音频和视频数据。如果我们什么都不做,故事就会按照下面的脚本发展: 阶段 1(背景剪切后 10 秒 ->)- CDN 无法将视频流传输给观众,因为没有数据,观众看到的是主帧。 阶段 2(10 秒-> 70 秒)--观众一方的播放器因无法接收到直播流而退出,房间里空无一人。 第 3 阶段(70 秒后)--服务器直接断开了推送流媒体的 RTMP 链接,主播需要重新打开直播才能继续。 主播可能只是短暂地接了一个紧急电话,但各云提供商的安全措施会迫使主播的直播提前结束。 1) 设置 setPauseFlag 在开始推流之前,使用 TXLivePushConfig 的 setPauseImg 接口设置一个等待图像,其含义建议为 "主播将暂时离开,稍后再回来"。