一种简易的ESP32图文Web服务器的实现方式

无意间发现这篇文章,觉得挺有意思的,分享一下:
https://randomnerdtutorials.com/display-images-esp32-esp8266-web-server/

功能很简洁,就是让ESP32作为图文Web服务器。文字好说,如何存储图片呢?我们知道通常Web Server一般把图片以文件或二进制流的形式存在可用存储上,那么在ESP32中又当如何?

文章给出了三种方式:
1、代码中直接“盗图”
2、图文存放在SPIFFS里(更接近传统方式)
3、直接编码图片到img标签中,依靠客户端浏览器功能还原(真第一次注意到还能这么玩)。实现是简单,但不适合大图片,并且需要有工具生成base64代码。

本文采用第三种方式。

需要额外下载两个库:
https://github.com/me-no-dev/ESPAsyncWebServer
https://github.com/me-no-dev/AsyncTCP

下载ZIP包即可,然后Arduino IDE里添加.zip库即可。
图片的base64代码工具。。。我不知道有啥推荐的,原文中有个在线上传。不过我没用,因为如果用C#自己写,核心代码其实就一句话:

string strBase64 = Convert.ToBase64String(File.ReadAllBytes(@"图片文件绝对路径"));

Arduino参考代码:

#include <WiFi.h>
#include <ESPAsyncWebServer.h>

const char* ssid     = "你的WIFI SSID";
const char* password = "你的WIFI密码";

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="data:image/jpeg;base64,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">
  </body>  
</html>)rawliteral";


void setup(){
  // Serial port for debugging purposes
  Serial.begin(115200);
  
  // Connect to Wi-Fi
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.println("Connecting to WiFi..");
  }

  // Print ESP32 Local IP Address
  Serial.println(WiFi.localIP());

  // Route for root / web page

  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send_P(200, "text/html", index_html);
  });

  // Start server
  server.begin();
}
 
void loop(){
  
}

编译前可以先开一个串口监视器,网络连接成功后会显示当前IP地址。然后浏览器里打开这个IP,效果如下:

发布了122 篇原创文章 · 获赞 61 · 访问量 53万+

猜你喜欢

转载自blog.csdn.net/ki1381/article/details/105619559
今日推荐