提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

安信可ESP32-CAM修改Web网页源代码

• 前言
• 一、使用CyberChef将数组转义成 HTML
• 二、使用CyberChef将 HTML转义成数组
• 参考

---

前言

1. 安信可ESP32-CAM开发板在下载例程后可以在web端显示摄像头图像，但在例程里一个对应字符都没看到，不知道是怎么设计web端的
2. 为了设计成自己喜欢的网页，我研究了下，原来是将html代码都转义成gz了：index_ov2640_html_gz[]，原因是html文件传到浏览器过程中是可以先压缩为GZIP格式的文件再传输的，压缩文件传输到浏览器后，会自动解压后再渲染出来，这样可以大大减少网络传输的压力，同时节约了单片机Flash的很多资源，可以看这个博主的内容https://blog.csdn/bd7iow/article/details/121315779
3. 所以要设计网页先要将ndex_ov2640_html_gz[]数组的内容转化为html文件，这里涉及到Cyber​​Chef 在线工具。
   快速版本 – 打开 Cyber​​Chef 在线工具
   手动版本 – 打开 Github-Cyber​​Chef 在线工具
   可以看这个博主的内容https://robotzero.one/esp32-cam-custom-html/

一、使用CyberChef将数组转义成 HTML

使用 Cyber​​Chef 在线工具可以轻松地将您自己的 HTML 转换为 Gzipped Hex 格式，该格式在 Arduino 和 IDF ESP-WHO 库的代码中的 index_html_gz 变量中找到。
CameraWebServer 示例中的 HTML 来自哪里？
Sketch 中的第三个选项卡包含一些看起来很奇怪的代码，分配给一个名为 index_html_gz[] 的变量：

在 app_httpd.cpp 选项卡中，此代码用于此变量：

上面的 index_handler 函数为浏览器提供 HTML。

通过上面的正则表达式的筛选，最后转义成HTML文件格式，包括去掉“,”去掉“空格”等等的筛选，

二、使用CyberChef将 HTML转义成数组

HTML修改完成后，再使用CyberChef工具将HTML转义成数组即可，不过正则表达式不同，以下是表达式内容

新设计的 HTML转义成数组后是一行的数据，可以使用excel表每xx个数据换一行，
第一列是总数据，第二列公式是：=MID($A$2,200*C1+1,200)，第三列是序号，把第二列往下拉即可得到分行后的数据

得到的数据即可copy到index_html_gz[]中

---

参考

Esp32Cam WebServer 网页源代码查看与编辑