ESP32-Web-Server编程-简单的照片浏览器

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_FORMAT
    httpd_resp_set_type(req, "image/jpg");
    httpd_resp_set_hdr(req, "Content-Disposition", "inline; filename=capture.jpg");
#elif CONFIG_IMAGE_BMP_FORMAT
    httpd_resp_set_type(req, "image/bmp");
    httpd_resp_set_hdr(req, "Content-Disposition", "inline; filename=capture.bmp");
#endif
    httpd_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)下一篇:

(码字不易感谢点赞或收藏)

相关推荐
安全系统学习2 小时前
网络安全之RCE分析与利用详情
服务器·网络·安全·web安全·系统安全
longze_72 小时前
Ubuntu连接不上网络问题(Network is unreachable)
linux·服务器·ubuntu
中微子3 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
中微子4 小时前
React 状态管理 源码深度解析
前端·react.js
风吹落叶花飘荡5 小时前
2025 Next.js项目提前编译并在服务器
服务器·开发语言·javascript
加减法原则5 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
AmosTian5 小时前
【系统与工具】Linux——Linux简介、安装、简单使用
linux·运维·服务器
yanlele5 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
lichenyang4535 小时前
React移动端开发项目优化
前端·react.js·前端框架