Scribd
Upload
361 views6 pages

Upload Image (PNG, JPEG) To ESP8266 Web Page and Display It

This document describes how to upload and display images on an ESP8266 web page. It includes code to connect the ESP8266 to WiFi, set up an HTTP server, and load image and HTML files from SPIFFS flash memory. When a client connects to the ESP8266 web server, it will redirect them to an index.html page that displays the image embedded within it. The code handles different file types and formats the correct MIME type for each.

Uploaded by

saravanan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
361 views6 pages

Upload Image (PNG, JPEG) To ESP8266 Web Page and Display It

This document describes how to upload and display images on an ESP8266 web page. It includes code to connect the ESP8266 to WiFi, set up an HTTP server, and load image and HTML files from SPIFFS flash memory. When a client connects to the ESP8266 web server, it will redirect them to an index.html page that displays the image embedded within it. The code handles different file types and formats the correct MIME type for each.

Uploaded by

saravanan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

Upload image (PNG, JPEG) to ESP8266 Web Page and Display it | Circu... https://circuits4you.com/2018/01/31/upload-image-png-jpeg-to-esp8266...

1 const char MAIN_page[] PROGMEM = R"=====(


2 <HTML>
3 <HEAD>
4 <TITLE>My first web page</TITLE>
5 </HEAD>
6 <BODY>
7 <CENTER>
8 <B>Circuits4You.com</B>
9 <img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAEsCAYAAAB5fY51AAAgAElEQVR4nMzdV
10 </CENTER>
11 </BODY>
12 </HTML>
13 )=====";

1 of 7 3/12/2019, 9:35 PM
Upload image (PNG, JPEG) to ESP8266 Web Page and Display it | Circu... https://circuits4you.com/2018/01/31/upload-image-png-jpeg-to-esp8266...

1 /*
2 * Display Image in web server demo
3 * circuits4you.com
4 */
5 #include <ESP8266WiFi.h>
6 #include <WiFiClient.h>
7 #include <ESP8266WebServer.h>
8
9 #include "index.h" //Our HTML webpage contents
10
11 //SSID and Password of your WiFi router
12 const char* ssid = "your_ssid";
13 const char* password = "your_password";
14
15 ESP8266WebServer server(80); //Server on port 80
16
17 //===============================================================
18 // This routine is executed when you open its IP in browser
19 //===============================================================
20 void handleRoot() {
21 String s = MAIN_page; //Read HTML contents
22 server.send(200, "text/html", s); //Send web page
23 }
24 //==============================================================
25 // SETUP
26 //==============================================================
27 void setup(void){
28 Serial.begin(9600);
29
30 WiFi.begin(ssid, password); //Connect to your WiFi router
31 Serial.println("");
32
33 // Wait for connection
34 while (WiFi.status() != WL_CONNECTED) {
35 delay(500);
36 Serial.print(".");
37 }
38
39 //If connection successful show IP address in serial monitor
40 Serial.println("");
41 Serial.print("Connected to ");
42 Serial.println(ssid);
43 Serial.print("IP address: ");
44 Serial.println(WiFi.localIP()); //IP address assigned to your ESP
45
46 server.on("/", handleRoot); //Which routine to handle at root location
47

2 of 7 3/12/2019, 9:35 PM
Upload image (PNG, JPEG) to ESP8266 Web Page and Display it | Circu... https://circuits4you.com/2018/01/31/upload-image-png-jpeg-to-esp8266...

1 <!DOCTYPE html>
2 <html>
3 <body>
4
5 <p>This example shows image loading from ESP8266 Web server, Image and HTML
6 web page files are uploaded in ESP Flash using SPIFFS tool:</p>
7
8 <img src="\image.png" alt="Image from ESP8266" width="200" height="200">
9
10 </body>
11 </html>

3 of 7 3/12/2019, 9:35 PM
Upload image (PNG, JPEG) to ESP8266 Web Page and Display it | Circu... https://circuits4you.com/2018/01/31/upload-image-png-jpeg-to-esp8266...

1 /*
2 * ESP8266 SPIFFS HTML Web Page with JPEG, PNG Image
3 *
4 */
5
6 #include <ESP8266WiFi.h>
7 #include <ESP8266WebServer.h>
8 #include <FS.h> //Include File System Headers
9
10 const char* imagefile = "/image.png";
11 const char* htmlfile = "/index.html";
12
13 //ESP AP Mode configuration
14 const char *ssid = "image-demo-circuits4you.com";
15 const char *password = "password";
16
17
18 ESP8266WebServer server(80);
19
20 void handleRoot(){
21 server.sendHeader("Location", "/index.html",true); //Redirect to our html web page
22 server.send(302, "text/plane","");
23 }
24
25 void handleWebRequests(){
26 if(loadFromSpiffs(server.uri())) return;
27 String message = "File Not Detected\n\n";
28 message += "URI: ";
29 message += server.uri();
30 message += "\nMethod: ";
31 message += (server.method() == HTTP_GET)?"GET":"POST";
32 message += "\nArguments: ";
33 message += server.args();
34 message += "\n";
35 for (uint8_t i=0; i<server.args(); i++){
36 message += " NAME:"+server.argName(i) + "\n VALUE:" + server.arg(i) + "\n"
37 }
38 server.send(404, "text/plain", message);
39 Serial.println(message);
40 }
41
42 void setup() {
43 delay(1000);
44 Serial.begin(115200);
45 Serial.println();
46
47 //Initialize File System
48 SPIFFS.begin();
49 Serial.println("File System Initialized");
50
51 //Initialize AP Mode
52 WiFi.softAP(ssid); //Password not used
53 IPAddress myIP = WiFi.softAPIP();
54 Serial.print("Web Server IP:");
55 Serial.println(myIP);
56
57 //Initialize Webserver
58 server.on("/",handleRoot);
59 server.onNotFound(handleWebRequests); //Set setver all paths are not found so we can handle
60 server.begin();
61 }
62
63 void loop() {
64 server.handleClient();

4 of 7 3/12/2019, 9:35 PM
Upload image (PNG, JPEG) to ESP8266 Web Page and Display it | Circu... https://circuits4you.com/2018/01/31/upload-image-png-jpeg-to-esp8266...

65 }
66
67 bool loadFromSpiffs(String path){
68 String dataType = "text/plain";
69 if(path.endsWith("/")) path += "index.htm";
70
71 if(path.endsWith(".src")) path = path.substring(0, path.lastIndexOf("."))
72 else if(path.endsWith(".html")) dataType = "text/html";
73 else if(path.endsWith(".htm")) dataType = "text/html";
74 else if(path.endsWith(".css")) dataType = "text/css";
75 else if(path.endsWith(".js")) dataType = "application/javascript";
76 else if(path.endsWith(".png")) dataType = "image/png";
77 else if(path.endsWith(".gif")) dataType = "image/gif";
78 else if(path.endsWith(".jpg")) dataType = "image/jpeg";
79 else if(path.endsWith(".ico")) dataType = "image/x-icon";
80 else if(path.endsWith(".xml")) dataType = "text/xml";
81 else if(path.endsWith(".pdf")) dataType = "application/pdf";
82 else if(path.endsWith(".zip")) dataType = "application/zip";
83 File dataFile = SPIFFS.open(path.c_str(), "r");
84 if (server.hasArg("download")) dataType = "application/octet-stream";
85 if (server.streamFile(dataFile, dataType) != dataFile.size()) {
86 }
87
88 dataFile.close();
89 return true;
90 }

5 of 7 3/12/2019, 9:35 PM
Upload image (PNG, JPEG) to ESP8266 Web Page and Display it | Circu... https://circuits4you.com/2018/01/31/upload-image-png-jpeg-to-esp8266...

6 of 7 3/12/2019, 9:35 PM

You might also like