当前位置： 首页 > news >正文

ESP32-Web-Server编程-通过 Base64 编码在网页中插入图片

news 文章来源：https://blog.csdn.net/wangyx1234/article/details/134866593 2024/9/22 10:03:50

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）下一篇：

(码字不易感谢点赞或收藏)

相关文章：

ESP32-Web-Server编程-通过 Base64 编码在网页中插入图片

ESP32-Web-Server编程-通过 Base64 编码在网页中插入图片 概述 不同于上节 ESP32-Web-Server编程-在网页中通过 src 直接插入图片&#xff0c;本节引入 Base64 编码来显示图片。 Base64 是一种用64个字符来编码表示任意二进制数据的方法。任何符号都可以转换成 Base64 字符集…...

编程日记 2023/12/8 1:36:47

聊一聊大模型 | 京东云技术团队

事情还得从ChatGPT说起。 2022年12月OpenAI发布了自然语言生成模型ChatGPT&#xff0c;一个可以基于用户输入文本自动生成回答的人工智能体。它有着赶超人类的自然对话程度以及逆天的学识。一时间引爆了整个人工智能界&#xff0c;各大巨头也纷纷跟进发布了自家的大模型&#…...

编程日记 2023/12/8 1:34:45

pandas空格及网页空格符NBSP替换处理

df3[动作一课程内容]df3[动作一课程内容].str.replace( ,) df3[动作一课程内容]df3[动作一课程内容].str.replace( ,) 截图中代码为python展示代码&#xff0c;由于网页空格符和常规空格符看起来大致相同&#xff0c;但却不能用常规空格替换解决...

编程日记 2023/12/8 1:33:44

智能优化算法应用：基于战争策略算法无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于战争策略算法无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于战争策略算法无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.战争策略算法4.实验参数设定5.算法结果6.参考…...

编程日记 2023/12/8 1:32:44

数据结构和算法-栈

数据结构和算法-栈 1. 栈的介绍 栈的介绍&#xff1a; 栈的英文为(stack)栈是一个先入后出的有序列表栈是限制线性表中元素的插入和删除只能在线性表的同一端进行的一种特殊线性表。允许插入和删除的一端&#xff0c;为变化的一端&#xff0c;称为栈顶&#xff0c;另一端为固…...

编程日记 2023/12/8 1:28:38

C#基础与进阶扩展合集-进阶篇（持续更新）

目录 本文分两篇&#xff0c;基础篇点击&#xff1a;C#基础与进阶扩展合集-基础篇 一、进阶 1、Predicate 2、设置C#语言版本 3、ListCollectionView过滤集合 4、值类型与引用类型 5、程序设置当前项目工作目录 6、获取App.config配置文件中的值 7、Linq常用语句 8、…...

编程日记 2023/12/8 1:27:37

快速入门GitHub 之超简单的注册方法和超好用的使用技巧

最近几天发现有些人对Github网站很好奇，但是无奈自己不会用，因为是外国人的网站，首先自己的英文就不过关。对于这个，其实可以用谷歌浏览器去浏览Github，它有一键翻译的功能。但还是有必要介绍一下关于Github的一些功能和具体操作，初学编程语言的小伙伴们一定对 GitHub 有…...

编程日记 2023/12/8 1:26:35

ESP32-Web-Server编程- 在 Web 上开发动态纪念册

ESP32-Web-Server编程- 在 Web 上开发动态纪念册 概述 Web 有很多有趣的玩法&#xff0c;在打开网页的同时送她一个惊喜。 需求及功能解析 本节演示在 ESP32 上部署一个 Web&#xff0c;当打开对应的网页时&#xff0c;将运行动态的网页内容&#xff0c;显示炫酷的纪念贺词…...

编程日记 2023/12/8 1:25:34

双向ESD保护 汽车级TVS二极管 ESD9B3.3ST5G工作原理、特性参数、封装形式

什么是汽车级TVS二极管&#xff1f; TVS二极管是一种用于保护电子电路的电子元件。它主要用于电路中的过电压保护&#xff0c;防止电压过高而损坏其他部件。TVS二极管通常被称为“汽车级”是因为它们能够满足汽车电子系统的特殊要求。 在汽车电子系统中&#xff0c;由于车辆启…...

编程日记 2023/12/8 1:21:30

Ribbon-IRule 修改负载均衡的规则

1、负载均衡规则描述 &#xff08;1&#xff09;整体关系 &#xff08;2&#xff09;规则描述 内置负载均衡规则类规则描述RoundRobinRule简单轮询服务列表来选择服务器。它是Ribbon默认的负载均衡规则。AvailabilityFilteringRule对以下两种服务器进行忽略: (1)在默认情况下&…...

编程日记 2023/12/8 1:17:26

双十二电视盒子哪个牌子最好？自费3000+测评整理电视盒子推荐

双十二不知道电视盒子哪个牌子最好的新手很多&#xff0c;想要我分享电视盒子推荐&#xff0c;为结果更客观我花费三千多购入了十几款热销电视盒子&#xff0c;通过一个月时间的全面对比测评后整理了电视盒子推荐&#xff0c;给双十二不知道怎么选电视盒子的朋友们提供参考。 一…...

编程日记 2023/12/8 1:16:25

排序：直接选择排序

直接选择排序&#xff1a; 本质&#xff1a; 直接选择排序的本质就是在数组中进行遍历挑选出最大的元素&#xff0c;讲最大的元素放到对应的位置后&#xff0c;再次选出次大的位置&#xff0c;而后又放到对应的位置..........................直到数组成为一个有序序列。 优…...

编程日记 2023/12/8 1:15:24

Nacos多数据源插件

Nacos从2.2.0版本开始,可通过SPI机制注入多数据源实现插件,并在引入对应数据源实现后,便可在Nacos启动时通过读取application.properties配置文件中spring.datasource.platform配置项选择加载对应多数据源插件.本文档详细介绍一个多数据源插件如何实现以及如何使其生效。 注意:…...

编程日记 2023/12/8 1:14:24

【Java基础篇 | 面向对象】—— 聊聊什么是接口（上篇）

个人主页&#xff1a;兜里有颗棉花糖 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 兜里有颗棉花糖 原创 收录于专栏【JavaSE_primary】 本专栏旨在分享学习JavaSE的一点学习心得&#xff0c;欢迎大家在评论区交流讨论&#x1f48c; 关于接口的简单的介绍…...

编程日记 2023/12/8 1:12:22

golang实现函数yamlToStruct(infile,outFile)

问&#xff1a; golang实现函数yamlToStruct(infile,outFile),将yaml文件格式化成golang的结构体 gpt: 要实现一个将YAML文件格式化成Golang结构体的函数&#xff0c;你可以使用 yaml 和 reflect 包来处理。首先&#xff0c;你需要使用 yaml.Unmarshal 函数将YAML文件解析为一…...

编程日记 2023/12/8 1:11:21

产品成本收集器流程演示

感谢大佬的文章&#xff0c;我只是一个翻译搬运工&#xff0c;原文地址&#xff1a;产品成本收集器 概述 SAP 令人兴奋的部分之一是它在不同操作模块之间的集成程度。使用产品成本收集器来跟踪生产就是一个很好的例子。在本博客中&#xff0c;我计划遵循产品成本收集器流程&a…...

编程日记 2023/12/8 1:09:20

【微服务】springboot整合quartz使用详解

目录 一、前言 二、quartz介绍 2.1 quartz概述 2.2 quartz优缺点 2.3 quartz核心概念 2.3.1 Scheduler 2.3.2 Trigger 2.3.3 Job 2.3.4 JobDetail 2.4 Quartz作业存储类型 2.5 适用场景 三、Cron表达式 3.1 Cron表达式语法 3.2 Cron表达式各元素说明 3.3 Cron表达…...

编程日记 2023/12/8 1:08:19

Electron+Ts+Vue+Vite桌面应用系列：TypeScript常用时间处理工具

文章目录 1️⃣ 时间处理工具1.1 格式化时间1.2 把时间戳改成日期格式1.3 Day.js 工具类使用1.4 date-fns 工具类使用 优质资源分享 作者&#xff1a;xcLeigh 文章地址&#xff1a;https://blog.csdn.net/weixin_43151418/article/details/134712978 ElectronTsVueVite桌面应用…...

编程日记 2023/12/8 1:06:18

记录 | centos源码编译bazel

tensorflow的源码编译依赖于 bazel 这里进行 bazel 的源码编译 1、安装依赖 sudo yum install -y java-11-openjdk sudo yum install -y java-11-openjdk-devel sudo yum install -y protobuf-compiler zip unzip2、知悉要安装的 bazel 的版本 务必安装受支持的 Bazel 版本…...

编程日记 2023/12/8 1:02:14

常见的Bean工厂后置处理器

此代码在jdk11上测试通过&#xff0c;SpringBoot版本为2.7.14 1.上代码 导入坐标 <dependencies><!-- spring数据坐标 --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-rest</art…...

编程日记 2023/12/8 1:01:13

代码随想录算法训练营第四十二天| 416 分割等和子集

目录 416 分割等和子集 416 分割等和子集 class Solution { public:const int N 210;bool canPartition(vector<int>& nums) {vector<int>f(N);int sum 0;for(auto num : nums)sum num;if(sum % 2 1)return false;//如果int target sum / 2;for(int i …...

编程日记 2023/12/8 1:00:13

memmove 和 memcpy的区别

函数原型及作用 memcpy 和 memmove 都是C语言中的库函数&#xff0c;在头文件string.h中&#xff0c;作用是拷贝一定长度的内存的内容&#xff0c;原型分别如下&#xff1a; void* memcpy(void *dst, const void *src, size_t count); void* memmove(void *dst, const void *…...

编程日记 2023/12/8 0:57:08

C实现的双向链表队列

如下代码所示&#xff0c;一个头文件实现的双向链表&#xff0c;用c代码实现&#xff1a; #ifndef _LINUX_LIST_H #define _LINUX_LIST_H#include "stddef.h" #include "poison.h"#ifndef ARCH_HAS_PREFETCH #define ARCH_HAS_PREFETCH static inline voi…...

编程日记 2023/12/8 0:56:06

自适应中值滤波器的python代码实现-----冈萨雷斯数字图像处理

基本原理&#xff1a; 自适应中值滤波器是一种图像处理技术&#xff0c;用于去除图像中的噪声。其原理是根据像素周围邻域内像素值的特性&#xff0c;动态地选择滤波器的大小和中值滤波的程度。 **邻域选择&#xff1a;**对于每个像素点&#xff0c;选取一个窗口或者邻域&…...

编程日记 2023/12/8 0:50:00

Python作业答疑_6.22~6.25

一、Python 一班 1. 基数分割列表 1.1 问题描述 给定一无序数列&#xff0c;把数列的第一个数字当成基数&#xff0c;让数列中基数小的数字排在数列前面&#xff0c;比基数大的数字排在数列的后面。 1.2 问题示例 如数列&#xff1a;num[4,1,8,3,9,2,10,7]。基数为 4&…...

编程日记 2023/12/8 0:45:56

Uber Go 语言编码规范

uber-go/guide 的中文翻译 English 文档链接 Uber Go 语言编码规范 Uber 是一家美国硅谷的科技公司&#xff0c;也是 Go 语言的早期 adopter。其开源了很多 golang 项目&#xff0c;诸如被 Gopher 圈熟知的 zap、jaeger 等。2018 年年末 Uber 将内部的 Go 风格规范 开源到 G…...

编程日记 2023/12/8 0:43:54

UniRepLKNet：用于音频、视频、点云、时间序列和图像识别的通用感知大内核ConvNet

摘要 https://arxiv.org/abs/2311.15599 大核卷积神经网络(ConvNets)最近受到了广泛的研究关注，但存在两个未解决的关键问题需要进一步研究。(1)现有大核ConvNets的架构在很大程度上遵循传统ConvNets或Transformers的设计原则，而大核ConvNets的架构设计仍未得到充分解决。(2…...

编程日记 2023/12/8 0:42:53

Http协议与Tomcat

HTTP协议 HTTP协议&#xff08;HyperText Transfer Protocol&#xff09;即超文本传输协议 &#xff0c;是TCP/IC网络体系结构应用层的一个客户端-服务端协议&#xff0c;是所有客户端&#xff0c;服务端数据传输的基石&#xff08;数据传输规则&#xff09; 特点 ⭐基于TCP协…...

编程日记 2023/12/8 0:40:51

Spring AOP从入门到精通

目录 1. AOP的演化过程 1. 代理模式 2. 动态代理 2.1 JDK动态代理 2.2 Cglib动态代理 3. Spring模式 3.1 ProxyFactory 3.2 ProxyFactoryBean 3.3 AbstractAutoProxyCreator 2. Spring AOP抽象 1. 核心术语 1.1 连接点(JoinPoint) 1.2 切点(Pointcut) 1.3 增强(Ad…...

编程日记 2023/12/8 0:38:50

Tap虚拟网卡

1 概述 Tap设备通常用于虚拟化场景下&#xff0c;其驱动代码位于drivers/net/tun.c&#xff0c;tap与tun复用大部分代码&#xff0c; 注&#xff1a;drivers/net/tap.c并不是tap设备的代码&#xff0c;而是macvtap和ipvtap&#xff1b; 下文中&#xff0c;我们统一称tap&#…...

编程日记 2023/12/8 0:37:48

【数电笔记】53-与非门构成的基本RS触发器

目录 说明&#xff1a; 1. 电路组成 2. 逻辑功能 3. 特性表 4. 特性方程 5. 状态转换图 6. 驱动表 7. 例题 例1 例2 说明&#xff1a; 笔记配套视频来源&#xff1a;B站&#xff1b;本系列笔记并未记录所有章节&#xff0c;只对个人认为重要章节做了笔记&#xff1b…...

编程日记 2023/12/8 0:36:47

kubernetes(k8s)容器内无法连接同所绑定的Service ClusterIP问题记录

kubernetes(k8s)容器内无法连接同所绑定的Service ClusterIP问题记录 1. k8s环境 k8s使用kubernetes-server-linux-amd64_1.19.10.tar.gz 二进制bin 的方式手动部署 k8s 版本: [rootmaster ~]# kubectl version Client Version: version.Info{Major:"1", Minor:&…...

编程日记 2023/12/8 0:35:47

Hadoop入门学习笔记

视频课程地址&#xff1a;https://www.bilibili.com/video/BV1WY4y197g7 课程资料链接&#xff1a;https://pan.baidu.com/s/15KpnWeKpvExpKmOC8xjmtQ?pwd5ay8 这里写目录标题 一、VMware准备Linux虚拟机1.1. VMware安装Linux虚拟机1.1.1. 修改虚拟机子网IP和网关1.1.2. 安装…...

编程日记 2023/12/8 0:34:46

堆栈，BSS，DATA，TEXT

一、目标文件 首先目标文件的构成&#xff0c;Linux下就是.o 文件 编译器编译源码后生成的文件叫目标文件&#xff08;Object File&#xff09;。 目标文件和可执行文件一般采用同一种格式&#xff0c;这种存储格式为 ELF。 目前文件的内容至少有编译后的机器指令代码和数据&a…...

编程日记 2023/12/8 0:33:45

Java八股文面试全套真题【含答案】-JSON篇

什么是JSON&#xff1f; 答案&#xff1a;JSON&#xff08;JavaScript Object Notation&#xff09;是一种轻量级的数据交换格式&#xff0c;基于JavaScript的对象字面量表示法&#xff0c;用于在不同语言和平台之间传输数据。JSON的数据结构是怎样的&#xff1f; 答案&#xf…...

编程日记 2023/12/8 0:32:44

数据库管理-第119期 记一次迁移和性能优化（202301130）

数据库管理-第119期 记一次迁移和性能优化&#xff08;202301130&#xff09; 1 迁移 之前因为DV组件没有迁移成功的那个PDB&#xff0c;后来想着在目标端安装DV组件迁移&#xff0c;结果目标端装不上&#xff0c;而且开了SR也没看出个所以然来。只能换一个方向&#xff0c;尝…...

编程日记 2023/12/8 0:30:42

【云原生-K8s】镜像漏洞安全扫描工具Trivy部署及使用

基础介绍基础描述Trivy特点 部署在线下载百度网盘下载安装 使用扫描nginx镜像扫描结果解析json格式输出 总结 基础介绍 基础描述 Trivy是一个开源的容器镜像漏洞扫描器&#xff0c;可以扫描常见的操作系统和应用程序依赖项的漏洞。它可以与Docker和Kubernetes集成&#xff0c;…...

编程日记 2023/12/8 0:28:41

【Docker】Swarm的ingress网络

Docker Swarm Ingress网络是Docker集群中的一种网络模式&#xff0c;它允许在Swarm集群中运行的服务通过一个公共的入口点进行访问。Ingress网络将外部流量路由到Swarm集群中的适当服务&#xff0c;并提供负载均衡和服务发现功能。 在Docker Swarm中&#xff0c;Ingress网络使…...

编程日记 2023/12/8 0:25:38

gcc安全特性之FORTIFY_SOURCE

GCC 4.0引入了FORTIFY_SOURCE特性&#xff0c;旨在加强程序的安全性&#xff0c;特别是对于字符串和内存操作函数的使用。下面是对FORTIFY_SOURCE机制的深入分析&#xff1a; 1. 功能 FORTIFY_SOURCE旨在检测和防止缓冲区溢出&#xff0c;格式化字符串漏洞以及其他与内存操作…...

编程日记 2023/12/8 0:20:35

【JUC】二十、volatile变量的特点与使用场景

文章目录 1、volatile可见性案例2、线程工作内存与主内存之间的原子操作3、volatile变量不具有原子性案例4、无原子性的原因分析&#xff1a;i5、volatile变量小总结6、重排序7、volatile变量禁重排的案例8、日常使用场景9、总结 volatile变量的特点&#xff1a; 可见性禁重排无…...

编程日记 2023/12/8 0:19:34

软件工程期末复习（2）

学习资料 设计模式与软件体系结构【期末全整理答案】_软件设计模式与体系结构期末考试题_鸽子不二的博客-CSDN博客 软件设计与体系结构(第二版)部分习题_软件设计与体系结构第二版课后答案-CSDN博客 软件体系结构试题库试题和答案 - 豆丁网Docin 软件设计与体系结构复习 - CN…...

编程日记 2023/12/8 0:11:25

[vue3] 使用 vite 创建vue3项目的详细流程

一、vite介绍 Vite&#xff08;法语意为 “快速的”&#xff0c;发音 /vit/&#xff0c;发音同 “veet”) 是一种新型前端构建工具&#xff0c;能够显著提升前端开发体验&#xff08;热更新、打包构建速度更快&#xff09;。 二、使用vite构建项目 【学习指南】学习新技能最…...

编程日记 2023/12/8 0:10:24

#HarmonyOS:软件安装window和mac预览Hello World

Window软件地址 https://developer.harmonyos.com/cn/develop/deveco-studio#download 安装的建议 这个界面这样选&#xff0c;其他界面全部按照默认路径往下走&#xff01;&#xff01;&#xff01; 等待安装… 安装环境错误处理 一般就是本地node配置异常导致&#xff…...

编程日记 2023/12/8 0:08:21

nginx 一键切换停机维护页面 —— 筑梦之路

背景说明 进行停机维护或者系统升级等操作&#xff0c;会影响到用户使用&#xff0c;如果停机维护期间用户未看到停机维护的通知&#xff0c;仍去访问系统&#xff0c;会提示默认不太友好的访问错误界面 &#xff0c;这时如果在维护的时候直接展示停机公告的具体信息&#xff0…...

编程日记 2023/12/8 0:00:13

Python作业答疑

1. 旋转字符串 1.1 问题描述 给定一个字符串&#xff08;以字符数组的形式&#xff09;和一个偏移量&#xff0c;根据偏移量原地从左向右旋转字符串。 1.2 问题示例 输入str"abcdefg"&#xff0c;offset3&#xff0c;输出"efgabcd"。 输入str"ab…...

编程日记 2023/12/7 23:59:12

计算机网络实用工具之Hydra

简介 Hydra 是一个并行登录破解程序&#xff0c;支持多种协议进行攻击。它非常快速且灵活&#xff0c;并且很容易添加新模块。 该工具使研究人员和安全顾问能够展示远程未经授权访问系统是多么容易。 目前该工具支持以下协议&#xff1a; Asterisk, AFP, Cisco AAA, Cisco au…...

编程日记 2023/12/7 23:57:10

AUTOSAR 入门

前言 AUTOSAR是什么Vector DaVinci 工具功能快捷键合理的创建标题&#xff0c;有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants 创建一个自定义列表如何创建一个注脚注释也是必…...

编程日记 2023/12/7 23:54:07

新版IDEA中，module模块无法被识别，类全部变成咖啡杯无法被识

新版IDEA中&#xff0c;module模块无法被识别&#xff0c;类全部变成咖啡杯无法被识 如下图&#xff1a; 解决方法&#xff1a;java的Directory文件没有被设置为根目录&#xff0c;解决方法如下&#xff1a; 这是方法之一&#xff0c;还有很多的原因 可能的原因&#xff1a; …...

编程日记 2023/12/7 23:53:06

vue.js el-table 动态单元格列合并

一、业务需求&#xff1a; 一个展示列表&#xff0c;表格中有一部分列是根据后端接口动态展示&#xff0c;对于不同类型的数据展示效果不一样。如果接口返回数据是’类型1‘的&#xff0c;则正常展示&#xff0c;如果是’类型2‘的数据&#xff0c;则合并当前数据的动态表格。…...

编程日记 2023/12/7 23:49:03

word模板导出word文件

前期准备工作word模板 右键字段如果无编辑域 ctrlF9 一下&#xff0c;然后再右键 wps 直接 ctrlF9 会变成编辑域 pom.xml所需依赖 <dependencies> <!--word 依赖--> <dependency><groupId>fr.opensagres.xdocreport</groupId><artifactId…...

编程日记 2023/12/7 23:47:02