河北保定建设工程信息网站,网站建设整体方案论文,个人建站怎么做网站好,wordpress相册分类Web服务器显示图片 文章目录 Web服务器显示图片1、软件准备2、硬件准备3、代码实现3.1 在Web页面中嵌入图像链接3.2 在SPIFFS文件系统中储存图像 在本文中#xff0c;将介绍在ESP32单片机中如何构建 Web 服务器以显示格式为 .png 或 .jpg 的图像。在示例中#xff0c;我们将构…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 LED330欧姆电阻面包板杜邦线连接线
3、代码实现
本次实例将使用到如下开源库
ESPAsyncWebServerAsyncTCP
3.1 在Web页面中嵌入图像链接
要通过超链接插入图像我们将在 HTML 代码中加入一些代码行。 首先创建一个带有 src 属性的 标签。
img srcimage_source现在可以将超链接插入到图像在 Internet 上的存储位置如下所示
img srchttps://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 Rrawliteral(
!DOCTYPE HTMLhtml
headmeta nameviewport contentwidthdevice-width, initial-scale1
/head
bodyh2ESP Image Web Server/h2img srcmangoimg srcappleimg srcbananaimg srcgrapeimg srcstrawberryimg srcorange /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.h2定义网络凭证
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 Rrawliteral(
!DOCTYPE HTMLhtml
headmeta nameviewport contentwidthdevice-width, initial-scale1
/head
bodyh2ESP Image Web Server/h2img srcmangoimg srcappleimg srcbananaimg srcgrapeimg srcstrawberryimg srcorange /body
/html)rawliteral;我们将创建 index_html 变量来存储 HTML 文本。 然后将创建一个元标记以确保我们的网络服务器可用于所有浏览器例如智能手机、笔记本电脑、计算机等。
meta nameviewport contentwidthdevice-width, initial-scale1下一步将是定义 HTML 网页主体。 这将进入标记脚本开始和结束的 标签。 这部分将包括网页标题和图像。 我们将在 标签内包含我们网页的标题并将其设置为 ESP Image Web Server。 h2ESP Image Web Server/h2在标题之后我们将包含我们想要在网页上显示的图像。 在 标签内我们将分别传递每张图片的图像源。 在这里我们使用六张不同水果的图像。 img srcmangoimg srcappleimg srcbananaimg srcgrapeimg srcstrawberryimg srcorange 这些图像源稍后将用于对该特定 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();
