论文总字数：19055字

摘 要

随着现代科技网络的快速发展，各种各样的Web开发平台不断的出现在人们的眼前，所以越来越多基于网络的Web应用软件快速的出现在人们的眼前，并且被应用于社会的各行各业中去。对于Web网页的应用，有简单也有复杂的，复杂的网页界面人们很难一眼看出Web页面的框架布局，本文为了解决这个问题，主要研究与分析基于图像的WEB页面布局，通过分析Web页面的布局结构，利用OpenCV来实现Web页面图像的提取并进行分析，使得人们能够一眼识别观察Web页面的基础布局。完成该系统需要用到的工具和实验环境有：Python、OpenCV、Windows 10、PyTorch、PyCharm等，实现此研究的意义在于，为Web页面图像特征的提取提供了研究方向，给研究此方向的人提供了一个参考价值。此系统的完成也能够方便后面的管理者能在短时间内去了解Web页面的整个布局。

本文针对Web网页图像布局的识别工作进行研究，提出了一些研究方法与实现，以解决遇到复杂网页时能一眼清晰Web网页布局结构的问题。论文主要的工作内容如下：①对Web网页信息特征的采集查阅相关资料，通过Yolov5算法进行训练检测，调用OpenCV提取图片，完成图像模型训练，在对自己的研究数据进行训练，完成测试。准备下载相关软硬件设备，做好完成课题的准备。②设计系统流程，该系统主要有以下几个流程，即建立Django框架，准备训练数据集，搭建虚拟环境，进行模型训练测试。最后利用此测试算法来训练自己的数据集。③系统实现及实验验证。构建系统测试页面，对系统进行测试，并对该系统进行分析总结。④完成论文的撰写。

通过实验测试，本系统实现了对Web页面图像布局的基础元素进行了识别效果，并将其标注出来，同时也将文本一一列出，通过与原数据进行分析，此实验已实现了预期功能。

关键词：Web页面；OpenCV图像技术；Web图像识别

Research and implementation of web page layout analysis method based on image

Abstract

With the rapid development of modern science and technology network, a variety of web development platforms continue to appear in front of people, so more and more web applications based on the network quickly appear in front of people's eyes, and are applied to all walks of life in society.. For the application of web pages, there are both simple and complex. It is difficult for people to see the frame layout of web pages at a glance with complex web interface. In order to solve this problem, this paper mainly studies and analyzes the image-based web page layout. By analyzing the layout structure of web pages, opencv is used to extract and analyze the image of web pages, It enables people to recognize and observe the basic layout of web pages at a glance. The tools and experimental environment needed to complete the system are: Python, opencv, windows 10, pytorch, pychar, etc. the significance of realizing this research is that it provides a research direction for the extraction of web page image features, and provides a reference value for people who study this direction. The completion of this system can also facilitate the later managers to understand the whole layout of the web page in a short time.

This paper studies the recognition of web page image layout, and puts forward some research methods and implementation to solve the problem of clear web page layout structure in case of complex web pages. The main contents of the paper are as follows: ① to collect and consult the relevant data of web page information features, through yolov5 algorithm for training and detection, call OpenCV to extract pictures, complete image model training, and train their research data, complete the test. Prepare to download the related software and hardware equipment and prepare for completing the project. ② The system flow is designed. The system mainly includes the following processes: establishing Django framework, preparing training data sets, building virtual environment and conducting model training test. Finally, the test algorithm is used to train its own data set. ③ The system is implemented and verified by experiments. Build the system test page, test the system, and analyze and summarize the system. ④ Finish writing the thesis.

Through the experimental test, the system realizes the recognition effect of the basic elements of web page image layout, and marks them out. At the same time, the text is listed one by one. Through the analysis with the original data, this experiment has achieved the expected function.

Key words: Web page；OpenCV image technology；web image recognition

目录

摘 要 I

Abstract II

第一章 绪论 1

1.1 研究背景及意义 1

1.2 国内研究与发展现状 1

1.3 主要工作内容 2

1.4 论文组织结构 3

第二章 开发工具及相关技术介绍 4

2.1 OpenCV图像技术 4

2.2 Python 4

2.3 镜像库 4

2.4 YOLOv5 5

2.5 PyTorch 6

2.6 PyCharm 7

2.7本章小结 8

第三章 系统设计 9

3.1 系统总体设计 9

3.2 本章小结 13

第四章 系统实现与实验分析 14

4.1 系统开发工具和开发环境配置 14

4.2 yolov5训练检测算法实现 15

4.3 系统核心代码展示 15

4.4 本章小结 24

第五章 总结与展望 25

5.1 总结 25

5.2 展望 25

致谢 26

参考文献 27

第一章 绪论

1.1 研究背景及意义

如今，随着网络技术和信息技术的迅速发展，许多Web开发的应用软件不断出现在人们的眼前，使得基于网络的Web应用软件迅速普及全球，并被用到社会的各个行业中。比如，我们每天办公所用的电脑桌面办公软件、还有财务软件等都使用了web网络的应用，在企业的产品应用系统中也是以Web页面的界面形式展现在用户的面前。如校园的网站页面，购物的app界面，游戏界面等，就连人们平时上网的聊天界面，也是web网页中最简便的应用，这些都是Web页面发展的证明。

随着社会科学的发展，web界面应用广泛，发展越发成熟了，Web界面窗口主要由标题栏、文本框、图像框、系统下拉菜单栏等部件来组成完成，实现精美实用的浏览界面。简单的web界面设计能够使人们更直观的去区分它们每一个区域组成模块的，但对于复杂的web界面，如淘宝、京东这样的主界面、要如何一眼去识别Web界面的所有组成部分呢？对于此问题，本课题主要是需要利用OpenCV图像技术来处理，通过对界面截图，来获取Web界面某一模块的部件组成和它的功能，采集分析部件的类型，使人们能更快速直观的看到整个web界面的布局，这样即使不是本界面的设计师，也能够对这一界面快速了解，此研究给后来管理者对界面以后的管理提供了方便，不需要花大量时间去手动分析Web网页布局，为工作节省不少时间。

1.2 国内研究与发展现状

随着网络上Web信息的发展，Web网页图像识别技术逐渐成为研究领域的一个热点。图像识别技术已经应用到各个领域中。目前，国内图像识别技术的深度学习值得一提的是基于阿里的技术，该技术可对图像中的内容进行精准的识别，它不止能识别一种标签，它里面包括了上千种物体标签、以及数十种常见的场景等，为图像实现标注、进行图片场景的分类、识别图像颜色、以及图像风格的识别和元素的识别能力等^[1]。不仅如此，图像识别技术还可以广泛应用于数字营销、新零售、广告设计等行业场景中。目前阿里云视觉智能开放平台上线的图像识别能力如下：

剩余内容已隐藏，请支付后下载全文，论文总字数：19055字