ESP32-Web-Server编程-通过 Base64 编码在网页中插入图片
ESP32-Web-Server编程-通过 Base64 编码在网页中插入图片
概述
不同于上节 ESP32-Web-Server编程-在网页中通过 src 直接插入图片，本节引入 Base64 编码来显示图片。
Base64 是一种用64个字符来编码表示任意二进制数据的方法。任何符号都可以转换成 Base64 字符集中的字符，这个转换过程就叫做base64编码。
通常，Base64 编码会使数据的长度增加，好处是编码后的文本数据可以在邮件正文、网页等直接显示。
有时打开一个网页，就能看到某些样式中的图片不是一个由 src标识的资源地址，而是 base64 编码的字符串，这么做有什么好处呢？ 这样可以减少一次请求 src 对应的文件的 http 请求。但也并不是什么图片都适合用 base64 来处理，因为图片越大，转换的 base64 的字符串就越长，对带宽的要求更高了。
需求及功能解析
本节演示在 ESP32 Web 服务器上插入若干 base64 编码后的图片。
将您的图像转换为 Base64 编码。可以 访问以下网站：
-
www.base64-image.de
-
https://www.base64encode.org/
示例解析
-
目录结构
├── CMakeLists.txt ├── main │ ├── CMakeLists.txt │ └── main.c User application ├── components │ └── fs_image └── README.md This is the file you are currently reading- 目录结构主要包含主目录 main，以及组件目录 components.
- 其中组件目录components中包含了用于存储网页文件的 fs_image 目录。
前端代码
前端代码在 body 中插入了两个 base64 编码后的图片：
<body><h2>ESP Image Web Server</h2><img src="data:image/png;base64,<img src="data:image/png;base64,
</body>
后端代码
后端代码仍旧使用前述基于 spiffs 的文件系统，存储 Web 需要的后端资源。
示例效果
上传图片转换为 Base64 数据：
打开网页查看 Base64 编码后的图片：
总结
1）本节介绍如何将图像转换为 Base64 以将其包含在 ESP32 Web 服务器的前端文件中。
资源链接
1）ESP32-Web-Server ESP-IDF系列博客介绍
2）对应示例的 code 链接 （点击直达代码仓库）
3）下一篇：
(码字不易感谢点赞或收藏)