首页 技术 正文
技术 2022年11月16日
0 收藏 387 点赞 2,232 浏览 1323 个字

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

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

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

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

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

那么如何显示一幅图片呢,百度(搜索在html里面去插入图片)

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

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

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

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

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

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

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

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

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

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

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

然后编译这个CGI程序

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

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

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

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

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

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

上面可以显示图片了!

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

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

top.html的效果图

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

bottom.html的效果图

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

其代码如下图

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

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

主要是与这行拼接起来

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

我只需要把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);   }

图片显示好看后的代码

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

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

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

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

要完成以上工作,需要两步:

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

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

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

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

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

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

见图片加入列表

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

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

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

下面要显示这些图片

//2.显示图片

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

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

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

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

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

处理用户的选择请求

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

最后实现查看监控视频

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

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

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:9,074
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,551
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,399
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,176
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,811
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,892