ESP32-Web-Server编程-简单的照片浏览器
概述
从本节开始我们开始制作一些有趣的多媒体 Web 的示例。
当你希望在网页上展示一些广告、照片，或者你的开发板带摄像头，能够采集一些图片，这时你希望可以通过手头的浏览器查看图片，或者播放广告。可以使用 ESP32 来建立 Web 服务器，让浏览器加载对应的照片即可。
需求及功能解析
本节演示如何在 ESP32 上部署一个最简单的 Web 服务器，来存储图片，并在浏览器访问这些图片时，自动刷新下一张。
示例解析
目录结构
├── CMakeLists.txt
├── main
│ ├── CMakeLists.txt
│ └── main.c User application
└── README.md This is the file you are currently reading
- 目录结构主要包含主目录 main。
前端代码
该示例非常简单，不需要前端文件。
后端代码
后端代码建立了一个 URL 为 /pic 的 pic_get_handler()，当用户访问该 URL 时，将执行该 handler 函数:
httpd_uri_t pic_uri = {.uri = "/pic",.method = HTTP_GET,.handler = pic_get_handler,.user_ctx = NULL};
在 pic_get_handler()中，存储了两张图片：
extern const unsigned char pic1_jpg_start[] asm("_binary_pic1_jpg_start");
extern const unsigned char pic1_jpg_end[] asm("_binary_pic1_jpg_end");
extern const unsigned char pic2_jpg_start[] asm("_binary_pic2_jpg_start");
extern const unsigned char pic2_jpg_end[] asm("_binary_pic2_jpg_end");#if CONFIG_IMAGE_JPEG_FORMAThttpd_resp_set_type(req, "image/jpg");httpd_resp_set_hdr(req, "Content-Disposition", "inline; filename=capture.jpg");
#elif CONFIG_IMAGE_BMP_FORMAThttpd_resp_set_type(req, "image/bmp");httpd_resp_set_hdr(req, "Content-Disposition", "inline; filename=capture.bmp");
#endifhttpd_resp_set_hdr(req, "Access-Control-Allow-Origin", "*");switch (pic_index) {case 0:image_data_buf_len = (pic1_jpg_end - pic1_jpg_start);image_data_buf = pic1_jpg_start;pic_index = 1;break;case 1:image_data_buf_len = (pic2_jpg_end - pic2_jpg_start);image_data_buf = pic2_jpg_start;pic_index = 0;break;default:break;}
每次刷新网页都会重新进入该函数，进而更新 pic_index，显示不同的图片。
示例效果
点击浏览器的刷新按钮，或者按下快捷键 F5，将刷新网页，显示下一张图片：
讨论
1）当你需要的功能很简单时，这种无前端文件的 Web 服务器很有用，它可以提供包括图片、文本、音乐、视频的简单访问，我们将在后面逐渐了解它们。
2）如果你需要保存对应的文件，可以使用浏览器的下载功能下载这些文件，如果是命令行系统，也可以使用 wget 命令下载对应的文件。你可以参考：1秒钟使用 python 建立文件服务器
总结
1）本节主要是介绍 通过 ESP32 Web Server 实现在网页端预览图片。我们将在下一节讲述如何通过这种无前端的简单 Web Server，实现文本的下载。
资源链接
1）ESP32-Web-Server ESP-IDF系列博客介绍
2）对应示例的 code 链接 （点击直达代码仓库）
3）下一篇：
(码字不易感谢点赞或收藏)
