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，显示不同的图片。

示例效果

点击浏览器的刷新按钮，或者按下快捷键 F5，将刷新网页，显示下一张图片：

讨论

1）当你需要的功能很简单时，这种无前端文件的 Web 服务器很有用，它可以提供包括图片、文本、音乐、视频的简单访问，我们将在后面逐渐了解它们。

2）如果你需要保存对应的文件，可以使用浏览器的下载功能下载这些文件，如果是命令行系统，也可以使用 wget 命令下载对应的文件。你可以参考：1秒钟使用 python 建立文件服务器

总结

1）本节主要是介绍通过 ESP32 Web Server 实现在网页端预览图片。我们将在下一节讲述如何通过这种无前端的简单 Web Server，实现文本的下载。

资源链接

1）ESP32-Web-Server ESP-IDF系列博客介绍

2）对应示例的 code 链接（点击直达代码仓库）

3）下一篇：

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