Upload image (PNG, JPEG) to ESP8266 Web Page and Display it

ESP8266 NodeMCU can be used as Web server with html webpage. Many times you may want to add images in web page. This can be achieved with help of SPIFFS (SPI Flash File System) or use of dataURL for small size images. Lets see step by step to upload image in web page.

There are two ways to display image in web page.

Method 1: For small size images (No File System)

In this method we use image URLData you can convert it using our simple tool Image to DataURL converter (https://onlinecamscanner.com/image-to-dataurl/)  

Step1 : Create HTML web page with image url data.

index.h

Step2: Main Arduino code

Refer:  https://circuits4you.com/2016/12/16/esp8266-web-server-html/

imageDemo.ino

 

Method 2: For large size images (SPIFFS)

Steps to Upload Image in ESP8266 NodeMCU

Step 1: Setup SPIFFS Tool to upload files in ESP

Uploading files to file system

ESP8266FS is a tool which integrates into the Arduino IDE. It adds a menu item to Tools menu for uploading the contents of sketch data directory into ESP8266 flash file system.

  • Download the tool: https://github.com/esp8266/arduino-esp8266fs-plugin/releases/download/0.1.3/ESP8266FS-0.1.3.zip.
  • In your Arduino sketchbook directory, create tools directory if it doesn’t exist yet
  • Unpack the tool into tools directory (the path will look like <home_dir>/Arduino/tools/ESP8266FS/)
  • Restart Arduino IDE
  • Open a sketch (or create a new one and save it)
  • Go to sketch directory (choose Sketch > Show Sketch Folder)
  • Create a directory named data and put image files you want in the file system there
  • Make sure you have selected a board, port, and closed Serial Monitor
  • Select Tools > ESP8266 Sketch Data Upload. This should start uploading the files into ESP8266 flash file system. When done, IDE status bar will display SPIFFS Image Uploaded message.

Step 2: Creating Web page with image in it

Create folder named as data where you sketch file is (.ino)

Create following files in you sketch data folder

index.html

put png image file in your data folder and rename it image.png make sure your image file should not be more than 3M bytes (our flash size)

Step 3: Create ESP8266 Arduino Sketch

Create new sketch and paste this code. and also create data folder where you have saved you sketch file .ino and paste image. Rename image with name image.png and create index.html file as shown above

Step 4: Uploading Flash with image and html web page file

After putting files in sketch data folder upload flash

Uploading Flash will take some time.

Step 5: Upload Program and Test

Upload program. and then connect to ESP WiFi Access point and enter IP address: 192.168.4.1. This is what we get if everything is done in right way.

Step 6: Points to be noted

  • Never take flash memory data in Variable as we have only 80Kbytes of RAM. Flash size is 3M bytes.
  • Directly stream Flash data to client
  • Flash Files are not deleted until SPIFFS.format() command is used or using delete command.
  • Uploading Sketch will not change or delete Flash files.

For More on SPIFFS read here

 

2 thoughts on “Upload image (PNG, JPEG) to ESP8266 Web Page and Display it

  1. Upload image to ESP8266 Web Page and Display it

    Thanks a lot for this topic. It was very helpful. I was able to upload a PNG image to the ESP8266. But the image display takes a very long time. Just too slow.

    Is there a solution for this?

    Thanks a lot

Leave a Reply