什么颜色做网站好看,网站开发说明,中国最强十大私企,动态ip可以做网站吗ESP32-Web-Server编程-简单的照片浏览器
概述
从本节开始我们开始制作一些有趣的多媒体 Web 的示例。
当你希望在网页上展示一些广告、照片#xff0c;或者你的开发板带摄像头#xff0c;能够采集一些图片#xff0c;这时你希望可以通过手头的浏览器查看图片#xff0c;…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; filenamecapture.jpg);
#elif CONFIG_IMAGE_BMP_FORMAThttpd_resp_set_type(req, image/bmp);httpd_resp_set_hdr(req, Content-Disposition, inline; filenamecapture.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实现文本的下载。
资源链接
1ESP32-Web-Server ESP-IDF系列博客介绍 2对应示例的 code 链接 点击直达代码仓库
3下一篇
(码字不易感谢点赞或收藏)
