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

news2025/1/12 0:45:09

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

前端代码

该示例非常简单，不需要前端文件。

后端代码

后端代码建立了一个 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，显示不同的图片。