湖南网站模板建站,北京网页设计,公司简介ppt模板,哪里有设计培训学校ESP32-Web-Server编程-通过 Base64 编码在网页中插入图片
概述
不同于上节 ESP32-Web-Server编程-在网页中通过 src 直接插入图片#xff0c;本节引入 Base64 编码来显示图片。
Base64 是一种用64个字符来编码表示任意二进制数据的方法。任何符号都可以转换成 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 编码后的图片
bodyh2ESP Image Web Server/h2img srcdata:image/png;base64,img srcdata:image/png;base64,
/body 后端代码
后端代码仍旧使用前述基于 spiffs 的文件系统存储 Web 需要的后端资源。
示例效果
上传图片转换为 Base64 数据 打开网页查看 Base64 编码后的图片 总结
1本节介绍如何将图像转换为 Base64 以将其包含在 ESP32 Web 服务器的前端文件中。
资源链接
1ESP32-Web-Server ESP-IDF系列博客介绍 2对应示例的 code 链接 点击直达代码仓库
3下一篇
(码字不易感谢点赞或收藏)
