网页长截图自动分割工具

背景

当需要分享或分析网页内容时，长截图是一种非常实用的形式，它能够完整地展示页面。然而，处理这些长截图时，如何保持其信息的完整性和可读性，同时方便进行后续操作，一直是一个挑战。比如目前（2024年初）市面上主流的AI图像模型，仍然不能处理很大、很复杂的图片，如果强行把一张长截图输入模型，就会导致模型输出的性能变差（很多细节无法被识别到）。为了解决这个问题，我开发了一款基于OpenCV的工具，旨在简化长截图的处理过程，同时保持其内容的完整性和可读性。

这个项目已在我的Github开源：https://github.com/Tim-Saijun/Web-page-Screenshot-Segmentation

与许多现有的工具或方法不同，Web-page-Screenshot-Segmentation采用了OpenCV自动地识别和遵循网页内容的自然分隔线，自动找到最合适的分割点。也就是说无论是标题、段落还是图表，都能够被整齐地保留在分割后的图片中，不会出现内容断裂或遗漏的情况。

使用Web-page-Screenshot-Segmentation非常简单，只需准备一张长截图，工具便会自动分析图片内容，并智能决定分割点。最终将获得一系列完整且结构化良好的图片，方便进行分享和进一步处理。

介绍

该项目用于根据文本的高度将网页的长截图分割成几个部分。主要思想是找到图像的低变化区域，然后在低变化区域中找到分割线。

输出的是网页的小而完整的图像，可以用于使用Screen-to-code生成网页或训练模型。 更多结果可以在images目录中找到。

开始使用

安装

1

 pip install Web-page-Screenshot-Segmentation

在命令行中使用

获取图像的分割线的高度

1

python -m Web_page_Screenshot_Segmentation.master -f "path/to/img"

输出应该是个列表:[6, 868, 1912, 2672, 3568, 4444, 5124, 6036, 7698]。它是图像分割线的高度列表。 如果你想在图中显示这条分割线，可以加上 -s True参数：

1

python -m Web_page_Screenshot_Segmentation.master -f "path/to/img" -s True

在图像中画出分割线

1

python -m Web_page_Screenshot_Segmentation.drawer --image_file path/to/image.jpg --hl [100,200] --color (0,255,0)

切分图像

1

python -m Web_page_Screenshot_Segmentation.spliter --f path/to/image.jpg -ht "[233,456]"

你将得到分割图像，保存在命令返回的路径中。

更多用法解释请参照帮助：

1
2

python master.py --help
python spliter.py --help

从源码使用

split_heights 函数

split_heights 函数用于根据各种阈值将图像分割成几个部分。它接受以下参数：

• file_path: 图像文件的路径。
• split: 一个布尔值，指示是否分割图像。
• height_threshold: 低变化区域的高度阈值。
• variation_threshold: 低变化区域的变化阈值。
• color_threshold: 颜色差异的阈值。
• color_variation_threshold: 颜色差异变化的阈值。
• merge_threshold: 两条线之间最小距离的阈值。

如果 split 是 False，函数返回分割线的高程列表；如果 split 是 True，则返回分割图像的路径。

示例用法

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

import Web_page_Screenshot_Segmentation
from Web_page_Screenshot_Segmentation.master import split_heights

# 在 'path/to/image.jpg' 分割图像为几个部分
split_image_path = split_heights(
    file_path='path/to/image.jpg',
    split=True,
    height_threshold=102,
    variation_threshold=0.5,
    color_threshold=100,
    color_variation_threshold=15,
    merge_threshold=350
)

print(f"分割后的图像保存在 {split_image_path}")

在这个例子中，根据提供的阈值，‘path/to/image.jpg’ 的图像被分割成几个部分。分割后的图像保存在函数返回的路径。

draw_line_from_file 函数

draw_line_from_file 函数用于在指定高度的图像上绘制线条。它接受以下参数：

• image_file: 图像文件的路径。
• heights: 在指定高度绘制线条的高程列表。
• color: 线条的颜色。默认颜色为红色 (0, 0, 255)。

该函数从提供的文件路径读取图像，在指定的高度绘制线条，然后将修改后的图像保存到新文件中。新文件保存在 result 目录下，与原始文件同名，但在文件扩展名前添加了 ‘result’。

如果函数在读取图像文件时遇到错误（例如，如果文件路径包含 ‘.’ 或中文字符），则会抛出异常。

示例用法

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

import Web_page_Screenshot_Segmentation
from Web_page_Screenshot_Segmentation.spliter import draw_line_from_file

# 在 'path/to/image.jpg' 的图像上，在高度 100 和 200 处绘制线条
result_image_path = draw_line_from_file(
    image_file='path/to/image.jpg',
    heights=[100, 200],
    color=(0, 255, 0)  # 以绿色绘制线条
)

print(f"修改后的图像保存在 {result_image_path}")

在这个例子中，‘path/to/image.jpg’ 的图像被修改，以在高度 100 和 200 处绘制绿色线条。修改后的图像保存在函数返回的路径。