阶段2-新手上路\项目-移动物体监控系统\Sprint4-嵌入式web服务器开发\第3课-CGI程序开发

实现CGI程序显示一幅图片最核心的功能

把上一节课编写好的led.c程序拷贝过来，并重新命名为image.c

把led的某些部分删除，后如下

那么如何显示一幅图片呢，百度（搜索在html里面去插入图片）

这是一个原始的html代码，在cgi程序中需要把它打印到cgiout里面去

以上运行的话会出错，因为cgi找的根路径不是在开发板的根路径，而是在web服务器的根路径开始，也就是从web目录开始的，那么该怎么办呢

我们可以在web目录下创建一个软链接，链接到/mnt/sd/目录下面去

所以把上面的程序调整一下

把上面的图像分辨率修改为width="160" height="120"

由于除了fprintf要求的里面的引号外，还有src="/sd/%s"这里的引号，所以这里就需要使用转义字符来处理，修改如下

然后编译这个CGI程序

再把它拷贝到我的/web/cam/下面去

然后还要去修改首页index.html代码

上面可以显示图片了！

上面显示的界面太简陋了，我希望显示出来的界面更好一些

下面把首页index.html一分为二，一个叫做top.html,另一个叫做bottom.html

top.html的效果图

bottom.html的效果图

其代码如下图

下面就需要把image.c与top.html,bottom.html给拼接起来

主要是与这行拼接起来

我只需要把top.html与bottom.html读出来然后，打印到cgiout里面

做一个函数print_file,它的第一个参数为需要把文件信息打印到何处，即cgiout，第二个参数就是要打印的文件信息。

void print_file(FILE *dst_fp, const char *src) {  FILE *src_fp;  char line[1024];     src_fp=fopen(src, "r");//只读方式打开     while (NULL != fgets(line, 1024, src_fp)) //把数据读到字符数组line里面来，最后结果部位NULL   fputs(line, dst_fp);//最后结果不为NULL，则把数组里面的内容写到dst_fp    fclose(src_fp);   }

图片显示好看后的代码

现在已经实现了显示一幅图片的效果，下面要去显示我所抓取到的所有图片，

要完成以上工作，需要两步：

a、把要显示的图片的名字加到一个列表中来；

b、专门实现一个显示函数去显示这些列表中的图片。

要显示一个图片最关键的是要去知道它的名字，那么要创建的那个列表就是图片名字的列表，那么如何去获取这些文件名呢，我们应该到/mnt/sd目录里面把所有文件都遍历一遍，然后把文件名（后缀为.jpg的文件名）拷贝到列表里面去

那么我们首先要去定义一个列表，保存所有图片文件名字

struct pic_list {  char name[30];  }g_img[2000];//可保存2000个文件名

见图片加入列表

下面要显示这些图片

//2.显示图片

下面加上一个跳转的按钮，去选择观看那一页的图片

对页面跳转的处理可以分为两个步骤，第一是去加上一个下拉框；第二是处理用户的选择

处理用户的选择请求

最后实现查看监控视频

怎么在一个CGI程序中嵌入视频