阶段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程序中嵌入视频

原文地址:https://www.cnblogs.com/gary-guo/p/6022832.html