A simple realization method of ESP32 graphic web server

I accidentally found this article and found it very interesting. Share it:
https://randomnerdtutorials.com/display-images-esp32-esp8266-web-server/

The function is very simple, that is, let ESP32 serve as a graphic web server. The text is easy to say, how to store pictures? We know that Web Server generally stores pictures in available storage in the form of files or binary streams, so what about ESP32?

The article gives three ways:
1. Direct "piracy" in the code
2. The picture and text are stored in SPIFFS (closer to the traditional way)
3. Directly encode the picture into the img tag, rely on the client browser function to restore (true The first time I noticed that I can still play like this). The implementation is simple, but it is not suitable for large pictures, and requires tools to generate base64 code.

This article uses the third method.

Two additional libraries need to be downloaded:
https://github.com/me-no-dev/ESPAsyncWebServer
https://github.com/me-no-dev/AsyncTCP

Just download the ZIP package, then add the .zip library to the Arduino IDE.
Picture base64 code tool. . . I do n’t know what to recommend, there is an online upload in the original text. But I am useless, because if you write it in C #, the core code is actually a sentence:

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

Arduino reference code:

#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(){
  
}

You can open a serial monitor before compiling, and the current IP address will be displayed after the network connection is successful. Then open this IP in the browser, the effect is as follows:

Published 122 original articles · Like 61 · Visits 530,000+

Guess you like

Origin blog.csdn.net/ki1381/article/details/105619559