Outil De Segmentation Automatique Des Captures D'écran Longues De Pages Web

1 Contexte

Lorsqu’il s’agit de partager ou d’analyser du contenu web, les captures d’écran longues sont une forme très pratique car elles permettent de montrer la page entière. Cependant, traiter ces captures d’écran longues pour maintenir l’intégrité et la lisibilité des informations tout en facilitant les opérations ultérieures a toujours été un défi. Par exemple, à l’heure actuelle (début 2024), les modèles d’images AI grand public ne peuvent toujours pas traiter des images très grandes et complexes. Si l’on force une capture d’écran longue dans le modèle, cela peut entraîner une dégradation des performances du modèle (de nombreux détails ne peuvent pas être reconnus). Pour résoudre ce problème, j’ai développé un outil basé sur OpenCV visant à simplifier le processus de traitement des captures d’écran longues tout en maintenant l’intégrité et la lisibilité de leur contenu.

Ce projet est open-source sur mon Github : https://github.com/Ryaang/Web-page-Screenshot-Segmentation

Contrairement à de nombreux outils ou méthodes existants, Web-page-Screenshot-Segmentation utilise OpenCV pour identifier et suivre automatiquement les lignes de séparation naturelles du contenu web, trouvant ainsi les points de segmentation les plus appropriés. Cela signifie que les titres, paragraphes ou graphiques peuvent être conservés de manière ordonnée dans les images segmentées, sans rupture ou omission de contenu.

L’utilisation de Web-page-Screenshot-Segmentation est très simple : il suffit de préparer une capture d’écran longue, et l’outil analysera automatiquement le contenu de l’image et déterminera intelligemment les points de segmentation. Vous obtiendrez finalement une série d’images complètes et bien structurées, prêtes à être partagées et traitées ultérieurement.

2 Présentation

Ce projet est utilisé pour segmenter une capture d’écran longue d’une page web en plusieurs parties selon la hauteur du texte. L’idée principale est de trouver les zones de faible variation de l’image, puis de trouver les lignes de segmentation dans ces zones de faible variation.

Le résultat est une série de petites images complètes de la page web, qui peuvent être utilisées pour générer des pages web ou entraîner des modèles avec Screen-to-code. Plus de résultats peuvent être trouvés dans le répertoire images.

3 Commencer à utiliser

3.1 Installation

1

 pip install Web-page-Screenshot-Segmentation

4 Utilisation en ligne de commande

Obtenez la hauteur des lignes de segmentation de l’image

1

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

La sortie devrait être une liste : [6, 868, 1912, 2672, 3568, 4444, 5124, 6036, 7698]. C’est la liste des hauteurs des lignes de segmentation de l’image. Si vous souhaitez afficher cette ligne de segmentation dans l’image, vous pouvez ajouter le paramètre -s True :

1

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

4.1 Dessiner les lignes de segmentation sur l’image

1

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

4.2 Découper l’image

1

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

Vous obtiendrez les images segmentées, enregistrées dans le chemin retourné par la commande.

Pour plus d’explications sur l’utilisation, veuillez vous référer à l’aide :

1
2

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

5 Utilisation à partir du code source

5.1 Fonction split_heights

La fonction split_heights est utilisée pour segmenter une image en plusieurs parties selon divers seuils. Elle accepte les paramètres suivants :

• file_path: Le chemin du fichier image.
• split: Un booléen indiquant s’il faut segmenter l’image.
• height_threshold: Le seuil de hauteur pour les zones de faible variation.
• variation_threshold: Le seuil de variation pour les zones de faible variation.
• color_threshold: Le seuil de différence de couleur.
• color_variation_threshold: Le seuil de variation de différence de couleur.
• merge_threshold: Le seuil de distance minimale entre deux lignes.

Si split est False, la fonction retourne la liste des hauteurs des lignes de segmentation ; si split est True, elle retourne le chemin des images segmentées.

5.1.1 Exemple d’utilisation

 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

# Segmente l'image 'path/to/image.jpg' en plusieurs parties
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"Les images segmentées sont enregistrées dans {split_image_path}")

Dans cet exemple, l’image ‘path/to/image.jpg’ est segmentée en plusieurs parties selon les seuils fournis. Les images segmentées sont enregistrées dans le chemin retourné par la fonction.

5.2 Fonction draw_line_from_file

La fonction draw_line_from_file est utilisée pour dessiner des lignes sur une image à des hauteurs spécifiées. Elle accepte les paramètres suivants :

• image_file: Le chemin du fichier image.
• heights: La liste des hauteurs où dessiner les lignes.
• color: La couleur des lignes. La couleur par défaut est rouge (0, 0, 255).

Cette fonction lit l’image à partir du chemin de fichier fourni, dessine des lignes aux hauteurs spécifiées, puis enregistre l’image modifiée dans un nouveau fichier. Le nouveau fichier est enregistré dans le répertoire result, avec le même nom que le fichier original mais avec ‘result’ ajouté avant l’extension du fichier.

Si la fonction rencontre une erreur lors de la lecture du fichier image (par exemple, si le chemin du fichier contient des ‘.’ ou des caractères chinois), elle lèvera une exception.

5.2.1 Exemple d’utilisation

 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

# Dessine des lignes sur l'image 'path/to/image.jpg' aux hauteurs 100 et 200
result_image_path = draw_line_from_file(
    image_file='path/to/image.jpg',
    heights=[100, 200],
    color=(0, 255, 0)  # Dessine les lignes en vert
)

print(f"L'image modifiée est enregistrée dans {result_image_path}")

Dans cet exemple, l’image ‘path/to/image.jpg’ est modifiée pour dessiner des lignes vertes aux hauteurs 100 et 200. L’image modifiée est enregistrée dans le chemin retourné par la fonction.