ウェブページの長いスクリーンショット自動分割ツール

1 背景

ウェブコンテンツを共有または分析する際、長いスクリーンショットは非常に便利な形式です。ページを完全に表示することができます。しかし、これらの長いスクリーンショットを処理する際に、情報の完全性と可読性を保ちながら後続の操作を容易にすることは常に課題でした。例えば、現在（2024年初頭）の市場にある主流のAI画像モデルは、非常に大きく複雑な画像を処理できません。長いスクリーンショットを無理にモデルに入力すると、モデルの出力性能が低下し（多くの詳細が認識されない）、問題が生じます。この問題を解決するために、OpenCVに基づいたツールを開発し、長いスクリーンショットの処理を簡素化し、その内容の完全性と可読性を保つことを目指しました。

このプロジェクトは私のGithubでオープンソース化されています：https://github.com/Ryaang/Web-page-Screenshot-Segmentation

多くの既存のツールや方法とは異なり、Web-page-Screenshot-SegmentationはOpenCVを使用してウェブコンテンツの自然な区切り線を自動で認識し、最適な分割点を見つけます。つまり、タイトル、段落、またはグラフが分割後の画像にきちんと保持され、内容の断裂や欠落が発生しません。

Web-page-Screenshot-Segmentationの使用は非常に簡単で、長いスクリーンショットを用意するだけで、ツールが画像内容を自動で分析し、分割点を賢く決定します。最終的に、一連の完全で構造化された画像が得られ、共有やさらなる処理が容易になります。

2 介绍

このプロジェクトは、テキストの高さに基づいてウェブページの長いスクリーンショットをいくつかの部分に分割するためのものです。主な考え方は、画像の低変化領域を見つけ、その低変化領域で分割線を見つけることです。

出力されるのは、ウェブページの小さくて完全な画像で、Screen-to-codeを使用してウェブページを生成したり、モデルを訓練したりするのに使用できます。より多くの結果は、imagesディレクトリで見つけることができます。

3 开始使用

3.1 安装

1

 pip install Web-page-Screenshot-Segmentation

4 在命令行中使用

画像の分割線の高さを取得する

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

4.1 在图像中画出分割线

1

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

4.2 切分图像

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

5 从源码使用

5.1 split_heights 函数

split_heights 関数は、さまざまな閾値に基づいて画像をいくつかの部分に分割するために使用されます。以下のパラメータを受け取ります：

• file_path: 画像ファイルのパス。
• split: 画像を分割するかどうかを示すブール値。
• height_threshold: 低変化領域の高さの閾値。
• variation_threshold: 低変化領域の変化の閾値。
• color_threshold: 色差の閾値。
• color_variation_threshold: 色差変化の閾値。
• merge_threshold: 2本の線の間の最小距離の閾値。

split が False の場合、関数は分割線の高さのリストを返します。split が True の場合、分割された画像のパスを返します。

5.1.1 示例用法

 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’ の画像がいくつかの部分に分割されます。分割された画像は関数の戻り値のパスに保存されます。

5.2 draw_line_from_file 函数

draw_line_from_file 関数は、指定された高さの画像に線を描画するために使用されます。以下のパラメータを受け取ります：

• image_file: 画像ファイルのパス。
• heights: 指定された高さに線を描画する高さのリスト。
• color: 線の色。デフォルトの色は赤 (0, 0, 255) です。

この関数は、提供されたファイルパスから画像を読み込み、指定された高さに線を描画し、変更された画像を新しいファイルに保存します。新しいファイルは result ディレクトリに保存され、元のファイルと同じ名前ですが、ファイル拡張子の前に ‘result’ が追加されています。

関数が画像ファイルの読み込み中にエラーに遭遇した場合（例えば、ファイルパスに ‘.’ や日本語文字が含まれている場合）、例外がスローされます。

5.2.1 示例用法

 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 に緑色の線が描画されます。変更された画像は関数の戻り値のパスに保存されます。