Web服务器显示图片
文章目录
- Web服务器显示图片
- 1、软件准备
- 2、硬件准备
- 3、代码实现
- 3.1 在Web页面中嵌入图像链接
- 3.2 在SPIFFS文件系统中储存图像
在本文中，将介绍在ESP32单片机中如何构建 Web 服务器以显示格式为 .png 或 .jpg 的图像。在示例中，我们将构建一个同时具有简单 HTTP 协议和异步 Web 服务器的 Web 服务器。 ESP32网络服务器将显示图像。简而言之，我们将学习使用不同的方法嵌入图像。
1、软件准备
- Arduino IDE
在前面的文章中，如何搭建ESP32的Arduino IDE开环境，主参考：
- ESP32-Arduino-开发实例-Arduino开发环境搭建
2、硬件准备
- ESP32开发板
- 5mm LED
- 330欧姆电阻
- 面包板
- 杜邦线（连接线）
3、代码实现
本次实例将使用到如下开源库：
- ESPAsyncWebServer
- AsyncTCP
3.1 在Web页面中嵌入图像链接
要通过超链接插入图像，我们将在 HTML 代码中加入一些代码行。 首先创建一个带有 src 属性的 标签。
<img src="image_source">
现在可以将超链接插入到图像在 Internet 上的存储位置，如下所示：
<img src="https://insert_the_website/your_image_source_url.png">
在您的HTML 脚本中添加这两行代码将在您的 Web 服务器中包含特定图像。
这种方式的优点是，减少ESP32储存，但是要求客户端能够访问Web。
3.2 在SPIFFS文件系统中储存图像
SPIFFS 将帮助我们访问 ESP32/ESP8266 内核的闪存。 我们会将图像存储在 ESP 板的闪存中，并在我们的异步 Web 服务器中访问它们。
在前面的文章中，对如何将文件上传到SPIFFS文件系统做了详细的介绍，请参考：
- 从SPIFFS加载Web页面文件
示例代码如下：
#include <WiFi.h>
#include <ESPAsyncWebServer.h>
#include <SPIFFS.h>// Replace with your network credentials
const char* ssid = "Your_SSID";
const char* password = "Your_Password";// Create AsyncWebServer object
AsyncWebServer server(80);const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html>
<head><meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body><h2>ESP Image Web Server</h2><img src="mango"><img src="apple"><img src="banana"><img src="grape"><img src="strawberry"><img src="orange"> </body>
</html>)rawliteral";
void setup(){Serial.begin(115200);WiFi.begin(ssid, password);while (WiFi.status() != WL_CONNECTED) {delay(1000);Serial.println("Connecting to WiFi..");}if(!SPIFFS.begin()){Serial.println("An Error has occurred while mounting SPIFFS");return;}Serial.println(WiFi.localIP());server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){request->send_P(200, "text/html", index_html);});server.on("/mango", HTTP_GET, [](AsyncWebServerRequest *request){request->send(SPIFFS, "/mango.png", "image/png");});server.on("/apple", HTTP_GET, [](AsyncWebServerRequest *request){request->send(SPIFFS, "/apple.png", "image/png");});server.on("/banana", HTTP_GET, [](AsyncWebServerRequest *request){request->send(SPIFFS, "/banana.png", "image/png");});server.on("/grape", HTTP_GET, [](AsyncWebServerRequest *request){request->send(SPIFFS, "/grape.png", "image/png");});server.on("/strawberry", HTTP_GET, [](AsyncWebServerRequest *request){request->send(SPIFFS, "/strawberry.png", "image/png");});server.on("/orange", HTTP_GET, [](AsyncWebServerRequest *request){request->send(SPIFFS, "/orange.png", "image/png");}); server.begin();
}void loop(){}
代码如何工作？
1）导入依赖库的头文件
#include <WiFi.h>
#include <ESPAsyncWebServer.h>
#include <SPIFFS.h>
2）定义网络凭证
const char* ssid = "Your_SSID";
const char* password = "Your_Password";
3）创建Web服务器
AsyncWebServer 对象将用于设置 ESP Web 服务器。 我们将传递默认的 HTTP 端口 80 作为构造函数的输入。 这将是服务器侦听传入 HTTP 请求的端口。
AsyncWebServer server(80);
4）创建Web页面
const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html>
<head><meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body><h2>ESP Image Web Server</h2><img src="mango"><img src="apple"><img src="banana"><img src="grape"><img src="strawberry"><img src="orange"> </body>
</html>)rawliteral";
我们将创建 index_html 变量来存储 HTML 文本。 然后将创建一个元标记以确保我们的网络服务器可用于所有浏览器，例如智能手机、笔记本电脑、计算机等。
<meta name="viewport" content="width=device-width, initial-scale=1">
下一步将是定义 HTML 网页主体。 这将进入标记脚本开始和结束的 标签。 这部分将包括网页标题和图像。 我们将在
标签内包含我们网页的标题，并将其设置为 ESP Image Web Server。<h2>ESP Image Web Server</h2>
在标题之后，我们将包含我们想要在网页上显示的图像。 在 标签内，我们将分别传递每张图片的图像源。 在这里，我们使用六张不同水果的图像。
<img src="mango"><img src="apple"><img src="banana"><img src="grape"><img src="strawberry"><img src="orange">
这些图像源稍后将用于对该特定 URL 发出请求。 因此，可以方便、轻松地标记图像。
setup()函数
在 setup() 函数中，我们将以 11520 的波特率打开串行连接。
Serial.begin(115200);
下面的代码部分将我们的 ESP 板连接到本地网络，我们已经在上面指定了其网络凭据。 建立连接后，ESP 板的 IP 地址将打印在串口监视器上。 这将帮助我们向服务器发出请求。
WiFi.begin(ssid, password);while (WiFi.status() != WL_CONNECTED) {delay(1000);Serial.println("Connecting to WiFi..");}Serial.println(WiFi.localIP());
这些代码行将初始化 SPIFFS。
if(!SPIFFS.begin()){Serial.println("An Error has occurred while mounting SPIFFS");return;}
现在，我们将研究异步图像 Web 服务器如何处理从客户端收到的 HTTP 请求。 我们可以将异步 Web 服务器配置为根据配置的路由侦听特定的 HTTP 请求，并在该路由上收到 HTTP 请求时做出相应的响应。
我们将在服务器对象上使用 on() 方法来侦听传入的 HTTP 请求并相应地执行。
当在 /root URL 上收到请求时
send_P() 方法将响应请求。 该方法将接受三个参数。 第一个是 200，它是“ok”的 HTTP 状态代码。 第二个是“text/html”，它对应于响应的内容类型。 第三个输入是保存在 index_html 变量中的文本。 因此，保存在 index_html 变量中的 HTML 文本将作为响应发送。
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){request->send_P(200, "text/html", index_html);});
当在 /image_source URL 上发送请求时：（/mango、/apple、/banana …）
send() 方法将用于返回 HTTP 响应。
例如，当服务器将收到对“/mango”URL 的请求时，/mango.png 将被发送到客户端。
server.on("/mango", HTTP_GET, [](AsyncWebServerRequest *request){request->send(SPIFFS, "/mango.png", "image/png");});
同样，所有其他图像请求也将以类似方式处理。
要启动服务器，我们将在我们的服务器对象上调用 begin() 。
server.begin();
)
