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

  • 相关阅读:
    Spring Boot框架开发的Java项目在CentOS7上的部署
    linux系统文件被删的几种恢复方法
    网页跳转微信加好友的方法
    一键跳转微信加好友
    jmeter java性能测试
    jenkins jmeter持续集成批处理jmx脚本
    jmeter命令行运行-分布式测试
    jmeter之jtl文件解析
    jmeter命令行运行-单节点
    网络爬虫-获取infoq里的测试新闻保存至html
  • 原文地址:https://www.cnblogs.com/gary-guo/p/6022832.html
Copyright © 2020-2023  润新知