tout cela est un peu lourd et multiplie par de l'espace disque

n'était pas possible d'extraire dans le fichier zip l'image au fur à mesure de la lecture

et le faire images par image

je ne veux pas d'une usine à gaz compliquée

Oui, c’est possible et cela évite de doubler l’espace disque.

Le principe est :

  1. Le navigateur télécharge le fichier ZIP.
  2. JavaScript lit le contenu du ZIP.
  3. Une seule image WebP est extraite à la fois.
  4. Cette image est transformée en URL temporaire.
  5. Le flipbook l’affiche.
  6. L’URL temporaire de l’image précédente est supprimée.

JSZip sait charger un ZIP avec loadAsync() et lire chaque fichier sous forme de Blob. [1][2] StPageFlip sait ensuite afficher une liste d’images avec loadFromImages(). [3]

Il faut toutefois préciser une limite importante : le navigateur doit télécharger le ZIP pour pouvoir le lire. En revanche, il n’est pas nécessaire d’extraire toutes les images sur le disque du serveur ni de créer un dossier contenant une deuxième copie des WebP.

La solution la plus simple consiste à lire le ZIP côté navigateur et à ne conserver en mémoire que les images nécessaires à l’affichage.

Principe de fonctionnement

document.zip
    ↓
JavaScript télécharge le ZIP
    ↓
JSZip lit le contenu
    ↓
page-1.webp est extraite
    ↓
le flipbook affiche page-1.webp
    ↓
page-2.webp est extraite au changement de page
    ↓
page-1.webp est libérée si elle n’est plus nécessaire

Exemple simple avec JSZip

Voici une page HTML qui charge un fichier ZIP et extrait les images WebP une par une.

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Flipbook ZIP</title>

<style>
html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    background: #202020;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
}

#flipbook {
    width: min(95vw, 900px);
    height: min(90vh, 1200px);
}
</style>
</head>

<body>

<div id="flipbook"></div>

<script src="https://cdn.jsdelivr.net/npm/jszip@3.10.1/dist/jszip.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/page-flip/dist/js/page-flip.browser.min.js"></script>

<script>
const zipUrl = "sherlock-holmes-epub.zip";

async function chargerZip() {
    const reponse = await fetch(zipUrl);

    if (!reponse.ok) {
        throw new Error("Impossible de télécharger le fichier ZIP.");
    }

    const donnees = await reponse.arrayBuffer();

    return JSZip.loadAsync(donnees);
}

async function obtenirImages(zip) {
    const fichiers = Object.values(zip.files)
        .filter(fichier => {
            return !fichier.dir && /\.webp$/i.test(fichier.name);
        })
        .sort((a, b) => {
            return a.name.localeCompare(
                b.name,
                undefined,
                { numeric: true }
            );
        });

    const images = [];

    for (const fichier of fichiers) {
        const blob = await fichier.async("blob");

        images.push({
            nom: fichier.name,
            url: URL.createObjectURL(blob)
        });
    }

    return images;
}

async function afficherFlipbook() {
    const zip = await chargerZip();
    const images = await obtenirImages(zip);

    if (images.length === 0) {
        throw new Error("Aucune image WebP trouvée dans le ZIP.");
    }

    const flipbook = new St.PageFlip(
        document.getElementById("flipbook"),
        {
            width: 600,
            height: 900,
            size: "stretch",
            minWidth: 280,
            maxWidth: 1200,
            minHeight: 420,
            maxHeight: 1600,
            showCover: true,
            drawShadow: true,
            flippingTime: 1000,
            usePortrait: true,
            mobileScrollSupport: true,
            autoSize: true
        }
    );

    flipbook.loadFromImages(
        images.map(image => image.url)
    );

    window.addEventListener("beforeunload", () => {
        for (const image of images) {
            URL.revokeObjectURL(image.url);
        }
    });
}

afficherFlipbook().catch(erreur => {
    document.getElementById("flipbook").textContent =
        erreur.message;
});
</script>

</body>
</html>

Cette version ne crée aucun fichier WebP supplémentaire sur le serveur. Les images sont extraites dans le navigateur sous forme de Blob et utilisées via des URL temporaires.

Limite de cette version

Même si les images ne sont pas écrites sur le disque du serveur, cette version extrait toutes les images du ZIP avant d’initialiser le flipbook.

Pour un petit document, c’est simple et suffisant.

Pour un gros document, il vaut mieux :

Version avec extraction progressive

Pour extraire les images au fur et à mesure, il faut charger les pages nécessaires avant de les afficher.

Le principe est de conserver seulement :

La bibliothèque StPageFlip est particulièrement pratique lorsqu’elle reçoit une liste complète d’images, mais elle n’est pas conçue comme un lecteur ZIP page par page. [3]

Une solution légère consiste donc à afficher soi-même une image WebP et à remplacer cette image lors du clic ou du glissement.

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Lecteur ZIP WebP</title>

<style>
html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    background: #202020;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    box-sizing: border-box;
}

#page {
    display: block;
    max-width: 95vw;
    max-height: 80vh;
    object-fit: contain;
    background: #ffffff;
    box-shadow: 0 0 25px #000000;
}

button {
    padding: 10px 18px;
    cursor: pointer;
}
</style>
</head>

<body>

<img id="page" alt="Page du document">

<div>
    <button id="precedente">Page précédente</button>
    <button id="suivante">Page suivante</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/jszip@3.10.1/dist/jszip.min.js"></script>

<script>
const zipUrl = "sherlock-holmes-epub.zip";

let zip;
let fichiers = [];
let index = 0;
let urlActuelle = null;

async function initialiser() {
    const reponse = await fetch(zipUrl);

    if (!reponse.ok) {
        throw new Error("Impossible de télécharger le fichier ZIP.");
    }

    const donnees = await reponse.arrayBuffer();

    zip = await JSZip.loadAsync(donnees);

    fichiers = Object.values(zip.files)
        .filter(fichier => {
            return !fichier.dir && /\.webp$/i.test(fichier.name);
        })
        .sort((a, b) => {
            return a.name.localeCompare(
                b.name,
                undefined,
                { numeric: true }
            );
        });

    if (fichiers.length === 0) {
        throw new Error("Aucune image WebP trouvée.");
    }

    await afficherPage(0);
}

async function afficherPage(nouveauIndex) {
    if (nouveauIndex < 0 || nouveauIndex >= fichiers.length) {
        return;
    }

    const fichier = fichiers[nouveauIndex];
    const blob = await fichier.async("blob");
    const nouvelleUrl = URL.createObjectURL(blob);

    const image = document.getElementById("page");

    image.onload = () => {
        if (urlActuelle !== null) {
            URL.revokeObjectURL(urlActuelle);
        }

        urlActuelle = nouvelleUrl;
        index = nouveauIndex;
    };

    image.src = nouvelleUrl;
}

document.getElementById("precedente").addEventListener(
    "click",
    () => afficherPage(index - 1)
);

document.getElementById("suivante").addEventListener(
    "click",
    () => afficherPage(index + 1)
);

initialiser().catch(erreur => {
    document.body.textContent = erreur.message;
});
</script>

</body>
</html>

Cette version ne charge qu’une page WebP à la fois. Elle ne fournit pas encore l’effet réaliste de tournage de page, mais elle est très légère et ne crée aucune copie permanente des images.

Compromis recommandé

Il y a trois niveaux possibles :

Méthode Espace serveur Mémoire navigateur Effet flipbook
Extraire toutes les images Élevé Moyen Oui
Charger toutes les images depuis le ZIP Faible Élevée Oui
Extraire une image à la fois Faible Faible À programmer

Pour éviter une usine à gaz, la solution la plus équilibrée est :

Le ZIP ne permet pas réellement d’éviter le téléchargement de l’archive entière avec une simple page HTML. Pour charger uniquement une page distante à la demande, il faudrait un serveur capable de lire le ZIP et de répondre à des requêtes individuelles, ou utiliser les requêtes HTTP partielles avec une gestion plus complexe.

Pour votre besoin de simplicité, je recommande donc la première solution JSZip + StPageFlip : elle ne duplique pas les fichiers sur le serveur et reste relativement courte à mettre en place.

Citations : [1] How to read a file https://stuk.github.io/jszip/documentation/howto/read_zip.html [2] loadAsync(data [, options]) https://stuk.github.io/jszip/documentation/api_jszip/load_async.html [3] StPageFlip/README.md at master · Nodlik/StPageFlip https://github.com/Nodlik/StPageFlip/blob/master/README.md [4] GitHub - Stuk/jszip: Create, read and edit .zip files with Javascript https://github.com/Stuk/jszip [5] How to use JSZip https://stuk.github.io/jszip/documentation/examples.html [6] GitHub - Nodlik/StPageFlip: Simple library for creating realistic page ... https://github.com/Nodlik/StPageFlip [7] JSZip - Documentation – Technical Manuals https://manuals.muthu.co/posts/javascript-libraries-and-functions/jszip.html [8] Loading ZIP Files | clientIO/jszip | DeepWiki https://deepwiki.com/clientIO/jszip/2.4-loading-zip-files [9] How to use the loadAsync function from jszip https://examplejavascript.com/jszip/loadasync/ [10] Create Zip archives in the browser with Jszip https://transloadit.com/devtips/create-zip-archives-in-the-browser-with-jszip/

pour que la conversion soit complète il faudrait que les fichiers WEP soit directement en capsuler dans un fichier .zip avec le nom du fichier PDF

ça revient à créer une commande pdf2zip

Oui. Il faut créer une commande pdf2zip qui :

  1. prend un fichier PDF en argument ;
  2. convertit chaque page en WebP ;
  3. place toutes les images WebP dans une archive ZIP ;
  4. nomme l’archive comme le PDF ;
  5. supprime les fichiers temporaires.

Dans Termux, installez les outils nécessaires :

pkg update
pkg install poppler imagemagick zip

Le paquet zip permet de créer des archives ZIP sous Termux. [1] ImageMagick peut convertir les images en WebP avec l’option -quality; pour des captures contenant du texte, le mode sans perte peut aussi être utilisé. [2][3]

Création de la commande pdf2zip

Créez le fichier :

nano "$PREFIX/bin/pdf2zip"

Collez le script suivant :

#!/data/data/com.termux/files/usr/bin/bash

set -euo pipefail

if [ "$#" -ne 1 ]; then
    echo "Utilisation : pdf2zip fichier.pdf"
    exit 1
fi

pdf="$1"

if [ ! -f "$pdf" ]; then
    echo "Erreur : fichier introuvable : $pdf"
    exit 1
fi

case "${pdf,,}" in
    *.pdf)
        ;;
    *)
        echo "Erreur : le fichier doit avoir l'extension .pdf"
        exit 1
        ;;
esac

dossier=$(dirname "$pdf")
nom=$(basename "$pdf" .pdf)
temp="$dossier/.${nom}_webp_tmp"
archive="$dossier/${nom}.zip"

rm -rf "$temp"
mkdir -p "$temp"

cleanup() {
    rm -rf "$temp"
}

trap cleanup EXIT

echo "Conversion du PDF en images PNG temporaires..."

pdftoppm \
    -png \
    -r 150 \
    "$pdf" \
    "$temp/page"

echo "Conversion des pages en WebP..."

for image in "$temp"/page-*.png; do
    [ -f "$image" ] || continue

    base=$(basename "$image" .png)

    magick \
        "$image" \
        -quality 85 \
        -define webp:method=6 \
        "$temp/$base.webp"
done

rm -f "$temp"/*.png

echo "Création de l’archive ZIP..."

rm -f "$archive"

(
    cd "$temp"
    zip -q -9 "$archive" ./*.webp
)

echo "Archive créée : $archive"

Enregistrez le fichier, puis rendez-le exécutable :

chmod +x "$PREFIX/bin/pdf2zip"

Utilisation

Depuis le dossier contenant le PDF :

pdf2zip document.pdf

Le résultat sera :

document.zip

L’archive contiendra :

page-1.webp
page-2.webp
page-3.webp

Exemple avec un nom contenant des espaces

pdf2zip "Les aventures de Sherlock Holmes.pdf"

Le résultat sera :

Les aventures de Sherlock Holmes.zip

L’archive contiendra :

page-1.webp
page-2.webp
page-3.webp

Vérifier le contenu de l’archive

unzip -l document.zip

Si unzip n’est pas encore installé :

pkg install unzip

Version avec un sous-dossier portant le nom du PDF

Si vous préférez que l’archive contienne un dossier portant le nom du PDF, remplacez la partie de création de l’archive par :

(
    cd "$temp"
    mkdir -p "$nom"
    mv ./*.webp "$nom/"
    cd ..
    zip -q -9 -r "$archive" "$temp/$nom"
)

Cependant, la première version est plus simple et produit directement :

document.zip
├── page-1.webp
├── page-2.webp
└── page-3.webp

Qualité WebP

La valeur 85 utilisée dans le script correspond à un bon compromis entre qualité et poids :

-quality 85

Pour réduire davantage la taille :

-quality 75

Pour améliorer la lisibilité du texte :

-quality 90

Pour des pages contenant principalement du texte, vous pouvez tester la version sans perte :

magick \
    "$image" \
    -define webp:lossless=true \
    -define webp:method=6 \
    "$temp/$base.webp"

Le WebP sans perte préserve mieux les contours nets et les petits caractères, mais les fichiers peuvent être plus volumineux. [3]

Modifier la résolution PDF

La résolution est contrôlée par l’option -r de pdftoppm. [4]

Résolution légère :

pdftoppm -png -r 100 document.pdf page

Résolution recommandée pour le web :

pdftoppm -png -r 150 document.pdf page

Résolution élevée :

pdftoppm -png -r 300 document.pdf page

Pour un site web, commencez généralement avec :

-r 150

Si les caractères sont trop petits ou flous, essayez :

-r 200

Version courte de pdf2zip

Si vous souhaitez une version plus compacte du script :

#!/data/data/com.termux/files/usr/bin/bash

set -euo pipefail

pdf="$1"
dossier=$(dirname "$pdf")
nom=$(basename "$pdf" .pdf)
temp="$dossier/.${nom}_tmp"
archive="$dossier/${nom}.zip"

rm -rf "$temp"
mkdir -p "$temp"

pdftoppm -png -r 150 "$pdf" "$temp/page"

for image in "$temp"/page-*.png; do
    base=$(basename "$image" .png)

    magick \
        "$image" \
        -quality 85 \
        -define webp:method=6 \
        "$temp/$base.webp"

    rm -f "$image"
done

rm -f "$archive"

(
    cd "$temp"
    zip -q -9 "$archive" ./*.webp
)

rm -rf "$temp"

echo "$archive"

Résultat final

La commande :

pdf2zip document.pdf

effectue automatiquement la chaîne suivante :

document.pdf
    ↓
pages PNG temporaires
    ↓
pages WebP
    ↓
document.zip
    ↓
suppression des fichiers temporaires

Le fichier final sera :

document.zip

avec les images :

page-1.webp
page-2.webp
page-3.webp

Citations : [1] Zip and Unzip in Termux – Compress and Extract ZIP Files https://termux.achik.us/zip-unzip-commands-compress-and-extract-zip-files/ [2] webp/doc/tools.md at main · ImageMagick/webp https://github.com/ImageMagick/webp/blob/main/doc/tools.md [3] How to convert images to WebP with ImageMagick https://www.simplified.guide/imagemagick/webp-convert [4] pdftoppm(1) — poppler-utils — Debian testing https://manpages.debian.org/testing/poppler-utils/pdftoppm.1.en.html [5] How to Zip and Unzip file & folders in Termux https://www.learntermux.tech/2023/01/how-to-zip-and-unzip-file-folders-in.html [6] Batch Resize and Optimize for Web - ImageMagick https://hackmamba-3f164318.mintlify.app/how-to/batch-resize-and-optimize [7] www/webp.html - platform/external/ImageMagick - Git at Google https://android.googlesource.com/platform/external/ImageMagick/+/e617870700c34c12c4a53d8e91223bb4f99e5297/www/webp.html [8] Options d'encodage WebP — ImageMagick Documentation ... https://www.ecoop.net/w/imagemagick/fr/webp.html [9] Package Management - Termux Wiki https://wiki.termux.com/wiki/Package_Management [10] Confused about -quality setting in Imagemagick https://stackoverflow.com/questions/72415360/confused-about-quality-setting-in-imagemagick [11] what's the purpose of "quality" when encoding LOSSLESS wepb? · ImageMagick ImageMagick · Discussion #7763 https://github.com/ImageMagick/ImageMagick/discussions/7763

pdftoppm -png -r 150 document.pdf page

j'aimerais que toutes les pages soient dans le format webp car c'est beaucoup plus rapide sur Internet

pdftoppm ne produit pas directement du WebP. Il faut donc convertir chaque page dans un format intermédiaire, puis utiliser un convertisseur comme ImageMagick.

Avec ImageMagick :

pkg install poppler imagemagick

Conversion directe en WebP avec un fichier temporaire PNG :

mkdir -p webp

pdftoppm -png -r 150 document.pdf /tmp/page

for fichier in /tmp/page-*.png; do
    nom=$(basename "$fichier" .png)
    magick "$fichier" -quality 82 "webp/$nom.webp"
    rm "$fichier"
done

Les fichiers seront créés ainsi :

webp/page-1.webp
webp/page-2.webp
webp/page-3.webp

Pour éviter les fichiers temporaires PNG dans /tmp, on peut utiliser un dossier de travail :

mkdir -p conversion webp

pdftoppm -png -r 150 document.pdf conversion/page

for fichier in conversion/page-*.png; do
    nom=$(basename "$fichier" .png)
    magick "$fichier" -quality 82 "webp/$nom.webp"
done

rm -rf conversion

La qualité WebP se règle avec -quality :

magick page-1.png -quality 80 page-1.webp

Repères pratiques :

Pour des pages contenant principalement du texte, je recommande :

magick "$fichier" -quality 85 -define webp:method=6 "webp/$nom.webp"

La commande complète devient :

pkg install poppler imagemagick

mkdir -p conversion webp

pdftoppm -png -r 150 document.pdf conversion/page

for fichier in conversion/page-*.png; do
    nom=$(basename "$fichier" .png)

    magick \
        "$fichier" \
        -quality 85 \
        -define webp:method=6 \
        "webp/$nom.webp"
done

rm -rf conversion

Si vous voulez réduire davantage le poids des images, baissez la résolution PDF :

pdftoppm -png -r 120 document.pdf conversion/page

Ou diminuez la qualité WebP :

magick "$fichier" -quality 78 "webp/$nom.webp"

Attention : le WebP avec perte peut légèrement dégrader les petits caractères. Pour un document contenant beaucoup de texte, commencez avec 150 DPI et une qualité comprise entre 82 et 88, puis comparez le poids et la lisibilité.

Citations : [1] PDF à WebP (par page) | Free Online PDF vers WebP Converter https://webp.to/pdf-webp/?lang=fr [2] Convert PDF all pages (or some) into images (pdftoppm) http://tttthis.com/blog/convert-pdf-all-pages-or-some-into-images-pdftoppm [3] Convertir documentos pdf a imágenes (.jpg o .png) ... https://comandoslinux.github.io/comandos/carpetasarchivos/pdftoppm.html [4] pdftoppm man - Linux Command Library https://linuxcommandlibrary.com/man/pdftoppm [5] pdftoppm(1) - Linux man page https://linux.die.net/man/1/pdftoppm [6] Convert PDF to PNG with poppler-utils #linux #pdf #png - GitHub Gist https://gist.github.com/miloskroulik/46ad39cf7eba8aef2c6f [7] Steps to Convert PDF to PNG on Linux - Wondershare PDFelement https://pdf.wondershare.com/pdf-knowledge/pdf-to-png-linux.html [8] Convertir PDF en WEBP en ligne https://convertio.co/fr/pdf-webp/ [9] Pdftoppm, convert PDF files into images from Ubuntu https://en.ubunlog.com/pdftoppm-converts-pdf-files-into-images/ [10] TIL Poppler's pdftoppm to convert PDF pages into PNG files https://micro.webology.dev/2025/05/21/til-popplers-pdftoppm-to-convert/

sherlock-holmes-epub$ pkg install poppler-utils Checking availability of current mirror: [*] https://packages-cf.termux.dev/apt/termux-main: ok Reading package lists... Done Building dependency tree... Done Reading state information... Done E: Unable to locate package poppler-utils sherlock-holmes-epub$

Dans Termux, le paquet ne s’appelle pas poppler-utils. Il faut installer le paquet poppler :

pkg update
pkg upgrade
pkg install poppler

Vérifiez ensuite les commandes disponibles :

which pdftoppm
which pdftocairo
pdftoppm -h

Vous devriez obtenir des chemins ressemblant à :

/data/data/com.termux/files/usr/bin/pdftoppm
/data/data/com.termux/files/usr/bin/pdftocairo

Vous pourrez ensuite convertir un PDF en PNG :

pdftoppm -png -r 150 document.pdf page

Résultat :

page-1.png
page-2.png
page-3.png

Pour produire des JPEG :

pdftoppm -jpeg -r 150 document.pdf page

Pour convertir uniquement les pages 2 à 5 :

pdftoppm -f 2 -l 5 -png -r 150 document.pdf page

Si pkg install poppler échoue également, vérifiez que le dépôt principal de Termux est correctement configuré :

termux-change-repo

Sélectionnez ensuite :

pkg update
pkg install poppler

Votre erreur vient donc du nom du paquet : poppler-utils est le nom utilisé sur Debian ou Ubuntu, tandis que Termux utilise généralement poppler.

alors peux-tu réécrire la documentation correctement avant de réécrire relis-toi pour savoir si les blocs sont correct

ne me balance pas du code encore à la con complètement erroné

Voici la documentation réécrite. J’ai vérifié la structure : le texte Markdown reste normal, chaque bloc de programme utilise uniquement ~~~langage, et chaque bloc est fermé par une ligne ~~~. Playwright prend en charge les captures visibles et pleine page, tandis que pdftoppm permet de convertir les pages PDF en PNG ou JPEG. [1][2]

Convertir des fichiers en images

Objectif

Il est possible d’enregistrer automatiquement un fichier texte, HTML ou PDF sous forme d’image.

Selon le besoin, on peut produire :

Deux méthodes sont possibles :

  1. Convertir directement le document en image.
  2. Automatiser l’affichage du document et réaliser des captures d’écran.

La conversion directe est généralement préférable pour les traitements automatisés, car elle ne dépend pas de la résolution réelle de l’écran ni du positionnement des fenêtres.

Choix de l’outil

Type de document Solution recommandée
Page HTML ou URL Playwright
HTML avec JavaScript Playwright
PDF pdftoppm ou pdftocairo
Fichier texte brut Conversion en HTML puis Playwright
Plusieurs PDF Script Bash avec pdftoppm
Plusieurs fichiers HTML Script Node.js avec Playwright
Capture réelle d’une application Outil de capture d’écran
Capture manuelle d’une page web Firefox, Fireshot ou Screenpresso

HTML et pages web avec Playwright

Installation

npm install playwright
npx playwright install chromium

Capture de la partie visible

const { chromium } = require("playwright");

(async () => {
  const browser = await chromium.launch({
    headless: true
  });

  const page = await browser.newPage({
    viewport: {
      width: 1200,
      height: 900
    }
  });

  await page.goto("https://example.com", {
    waitUntil: "networkidle"
  });

  await page.screenshot({
    path: "capture.png"
  });

  await browser.close();
})();

Cette capture correspond à la fenêtre virtuelle définie par width: 1200 et height: 900.

Capture d’un fichier HTML local

const { chromium } = require("playwright");
const path = require("path");

(async () => {
  const browser = await chromium.launch({
    headless: true
  });

  const page = await browser.newPage({
    viewport: {
      width: 1200,
      height: 900
    }
  });

  const fichier = path.resolve("document.html");

  await page.goto(`file://${fichier}`, {
    waitUntil: "networkidle"
  });

  await page.screenshot({
    path: "document.png",
    fullPage: true
  });

  await browser.close();
})();

Capture de toute la page

await page.screenshot({
  path: "page-complete.png",
  fullPage: true
});

L’option fullPage: true capture toute la hauteur déroulable de la page, y compris la partie située sous la zone visible de l’écran. [1]

Capture d’un élément précis

await page.locator(".article").screenshot({
  path: "article.png"
});

Avec un identifiant HTML :

await page.locator("#contenu").screenshot({
  path: "contenu.png"
});

Cette méthode permet de capturer uniquement un article, un tableau, une facture, un graphique ou n’importe quel autre élément HTML.

Captures successives avec défilement

Lorsque l’on souhaite obtenir une image pour chaque portion visible de la page, il faut faire défiler la page et effectuer une capture à chaque position.

Exemple de base

const { chromium } = require("playwright");

(async () => {
  const browser = await chromium.launch({
    headless: true
  });

  const page = await browser.newPage({
    viewport: {
      width: 1200,
      height: 900
    }
  });

  await page.goto("file:///chemin/vers/document.html", {
    waitUntil: "networkidle"
  });

  const hauteurDocument = await page.evaluate(() => {
    return Math.max(
      document.body.scrollHeight,
      document.documentElement.scrollHeight
    );
  });

  const hauteurCapture = 900;

  for (
    let position = 0, numero = 1;
    position < hauteurDocument;
    position += hauteurCapture, numero++
  ) {
    await page.evaluate(y => {
      window.scrollTo(0, y);
    }, position);

    await page.waitForTimeout(200);

    await page.screenshot({
      path: `capture-${String(numero).padStart(3, "0")}.png`
    });
  }

  await browser.close();
})();

Les fichiers produits seront par exemple :

capture-001.png
capture-002.png
capture-003.png
capture-004.png

Version avec dernière position corrigée

La dernière portion d’une page peut être plus petite que la hauteur de la fenêtre. Le script suivant ajoute une capture positionnée exactement en bas du document.

const { chromium } = require("playwright");

(async () => {
  const browser = await chromium.launch({
    headless: true
  });

  const page = await browser.newPage({
    viewport: {
      width: 1200,
      height: 900
    }
  });

  await page.goto("file:///chemin/vers/document.html", {
    waitUntil: "networkidle"
  });

  const hauteurFenetre = 900;

  const hauteurDocument = await page.evaluate(() => {
    return Math.max(
      document.body.scrollHeight,
      document.documentElement.scrollHeight
    );
  });

  const positions = [];

  for (
    let position = 0;
    position < hauteurDocument;
    position += hauteurFenetre
  ) {
    positions.push(position);
  }

  const dernierePosition = Math.max(
    0,
    hauteurDocument - hauteurFenetre
  );

  if (!positions.includes(dernierePosition)) {
    positions.push(dernierePosition);
  }

  for (let index = 0; index < positions.length; index++) {
    await page.evaluate(y => {
      window.scrollTo(0, y);
    }, positions[index]);

    await page.waitForTimeout(200);

    await page.screenshot({
      path: `capture-${String(index + 1).padStart(3, "0")}.png`
    });
  }

  await browser.close();
})();

Masquer les éléments fixes

Les menus fixes, bandeaux de cookies et en-têtes peuvent apparaître sur chaque capture.

Ils peuvent être masqués avec une feuille de style temporaire :

await page.addStyleTag({
  content: `
    header,
    .menu-fixe,
    .cookie-banner {
      visibility: hidden !important;
    }
  `
});

Ou avec un sélecteur précis :

await page.locator("header").evaluate(element => {
  element.style.visibility = "hidden";
});

Conversion des PDF avec pdftoppm

Installation

Sous Debian ou Ubuntu :

sudo apt update
sudo apt install poppler-utils

pdftoppm convertit les pages d’un fichier PDF en fichiers image. Il peut produire notamment des fichiers PNG ou JPEG avec les options correspondantes. [2]

Conversion en PNG

pdftoppm -png -r 150 document.pdf page

Les fichiers produits seront :

page-1.png
page-2.png
page-3.png

Conversion en JPEG

pdftoppm -jpeg -r 150 document.pdf page

Les fichiers produits seront :

page-1.jpg
page-2.jpg
page-3.jpg

Résolution

La résolution se définit avec l’option -r.

pdftoppm -png -r 100 document.pdf page
pdftoppm -png -r 150 document.pdf page
pdftoppm -png -r 300 document.pdf page

Repères pratiques :

Convertir certaines pages

pdftoppm -f 2 -l 5 -png -r 150 document.pdf page

Cette commande convertit les pages 2 à 5 incluses.

Convertir une seule page

pdftoppm -f 1 -l 1 -singlefile -png document.pdf page

Le résultat sera :

page.png

Conversion avec pdftocairo

pdftocairo est une autre commande fournie par Poppler.

PNG

pdftocairo -png -r 150 document.pdf page

JPEG

pdftocairo -jpeg -r 150 document.pdf page

SVG

pdftocairo -svg document.pdf document.svg

pdftoppm et pdftocairo permettent de convertir directement les pages PDF, sans passer par une capture réelle de l’écran.

Transformer un fichier texte en HTML

Un fichier texte brut doit être affiché dans une page HTML avant d’être capturé par Playwright.

Script PHP

<?php

$nomFichier = 'document.txt';

$contenu = file_get_contents($nomFichier);

if ($contenu === false) {
    http_response_code(500);
    exit('Impossible de lire le fichier.');
}

$texte = htmlspecialchars(
    $contenu,
    ENT_QUOTES | ENT_SUBSTITUTE,
    'UTF-8'
);

echo <<<HTML
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Document texte</title>
<style>
html,
body {
    margin: 0;
    padding: 0;
    background: #ffffff;
}

body {
    margin: 40px;
    color: #111111;
    font-family: monospace;
    font-size: 16px;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
</style>
</head>
<body>$texte</body>
</html>
HTML;

La fonction htmlspecialchars() évite que le contenu du fichier texte soit interprété comme du HTML.

Générer le fichier HTML

php texte-vers-html.php > document.html

Puis lancer le script de capture :

node capture.js

Traiter plusieurs PDF

Le script suivant convertit tous les PDF du dossier courant et place les images de chaque document dans un dossier séparé.

#!/usr/bin/env bash

set -euo pipefail

mkdir -p images

find . -maxdepth 1 -type f -iname '*.pdf' -print0 |
while IFS= read -r -d '' fichier; do
    base=$(basename "$fichier")
    nom="${base%.*}"

    mkdir -p "images/$nom"

    pdftoppm \
        -png \
        -r 150 \
        "$fichier" \
        "images/$nom/page"
done

Cette version prend en charge les noms de fichiers contenant des espaces.

Exemple d’arborescence :

images/
├── document-1/
│   ├── page-1.png
│   └── page-2.png
└── document-2/
    ├── page-1.png
    └── page-2.png

Traiter plusieurs fichiers HTML

Le script suivant parcourt le dossier html et crée une capture pleine page pour chaque fichier HTML.

const fs = require("fs");
const path = require("path");
const { chromium } = require("playwright");

(async () => {
  const dossierEntree = path.resolve("html");
  const dossierSortie = path.resolve("images");

  fs.mkdirSync(dossierSortie, {
    recursive: true
  });

  const browser = await chromium.launch({
    headless: true
  });

  const fichiers = fs.readdirSync(dossierEntree)
    .filter(fichier => {
      return fichier.toLowerCase().endsWith(".html");
    });

  for (const fichier of fichiers) {
    const page = await browser.newPage({
      viewport: {
        width: 1200,
        height: 900
      }
    });

    const cheminHTML = path.join(dossierEntree, fichier);
    const nom = path.basename(fichier, ".html");
    const sortie = path.join(dossierSortie, `${nom}.png`);

    await page.goto(`file://${cheminHTML}`, {
      waitUntil: "networkidle"
    });

    await page.screenshot({
      path: sortie,
      fullPage: true
    });

    await page.close();
  }

  await browser.close();
})();

Arborescence attendue :

html/
├── facture.html
├── rapport.html
└── article.html

Images générées :

images/
├── facture.png
├── rapport.png
└── article.png

Logiciels graphiques

Fireshot

Fireshot est une extension de navigateur capable de capturer :

Les captures peuvent être exportées notamment en PNG, JPEG ou PDF. [3]

Firefox

Firefox propose une fonction intégrée permettant de capturer une page web entière, y compris la partie située sous la zone visible.

Screenpresso

Screenpresso permet de capturer manuellement une image ou une vidéo de l’écran et propose des fonctions d’annotation et de partage. [4]

Ces logiciels conviennent surtout à un usage manuel. Pour une automatisation répétitive, Playwright et les outils Poppler sont plus adaptés.

Rendu direct ou capture réelle

Rendu direct

Le document est converti directement par un moteur de rendu.

Avantages :

Inconvénients :

Capture réelle de l’écran

Le programme capture ce qui est réellement affiché.

Avantages :

Inconvénients :

Nommage des fichiers

Pour faciliter le classement, utiliser de préférence un nom contenant :

Exemples :

rapport-2026-08-21-page-001.png
rapport-2026-08-21-page-002.png
facture-2026-08-21-page-001.png
article-2026-08-21-capture-001.png

Cette organisation facilite :

Automatiser avec cron

Modifier la crontab :

crontab -e

Exemple d’exécution tous les jours à 2 h 30 :

30 2 * * * /chemin/vers/script-capture.sh >> /var/log/capture.log 2>&1

Les scripts exécutés par cron doivent utiliser des chemins absolus lorsque cela est possible.

Exemples :

/usr/bin/pdftoppm
/usr/bin/node
/home/utilisateur/projet/capture.js

Supprimer les anciennes images

Avant toute suppression, vérifier les fichiers concernés avec -print.

find /chemin/vers/images \
    -type f \
    -name '*.png' \
    -mtime +30 \
    -print

Après vérification, supprimer les fichiers âgés de plus de 30 jours :

find /chemin/vers/images \
    -type f \
    -name '*.png' \
    -mtime +30 \
    -delete

Chaîne de traitement complète

document.html  -> Playwright -> document.png
document.txt   -> PHP -> document.html -> Playwright -> document.png
document.pdf   -> pdftoppm -> page-1.png, page-2.png, page-3.png

Recommandation finale

Pour une automatisation fiable :

  1. Utiliser Playwright pour les fichiers HTML et les pages web.
  2. Utiliser pdftoppm pour transformer les PDF en images.
  3. Transformer les fichiers texte en HTML avant de les capturer.
  4. Utiliser Bash pour traiter plusieurs fichiers.
  5. Utiliser cron pour planifier les traitements.
  6. Utiliser des noms de fichiers contenant la date et le numéro de page.
  7. Utiliser find pour supprimer les anciennes images.
  8. Vérifier systématiquement que chaque bloc de programme est fermé par une ligne ~~~.

Citations : [1] Screenshots https://playwright.dev/docs/screenshots [2] pdftoppm(1) — poppler-utils — Debian testing https://manpages.debian.org/testing/poppler-utils/pdftoppm.1.en.html [3] Page Captures d'écran Web - Fireshot - Chrome Web Store https://chromewebstore.google.com/detail/take-webpage-screenshots/mcbpblocgmgfnpjjppndjkmgjaogfceg?hl=fr [4] Capturer votre écran en images et vidéos avec Screenpresso https://www.screenpresso.com/fr/ [5] Screenshots | Playwright Python https://playwright.dev/python/docs/screenshots [6] NET https://playwright.dev/dotnet/docs/screenshots [7] pdftoppm(1) — poppler-utils — Debian bullseye https://manpages.debian.org/bullseye/poppler-utils/pdftoppm.1.en.html [8] pdftoppm(1) — poppler-utils — Debian experimental https://manpages.debian.org/experimental/poppler-utils/pdftoppm.1.en.html [9] Java https://playwright.dev/java/docs/screenshots [10] pdftoppm(1) — poppler-utils - bookworm https://manpages.debian.org/bookworm/poppler-utils/pdftoppm.1.en.html [11] Screenshots | Playwright https://playwright.dev/mcp/tools/screenshots [12] pdftoppm(1) — poppler-utils — Debian buster https://manpages.debian.org/buster/poppler-utils/pdftoppm.1.en.html

Convertir automatiquement des fichiers en images

Objectif

Il est possible d’enregistrer un fichier texte, HTML ou PDF sous forme d’image. Cela peut correspondre à :

Il faut distinguer deux méthodes :

  1. Rendre directement le document en images, méthode généralement la plus fiable.
  2. Photographier réellement l’écran, en automatisant le défilement et les captures.

La première méthode est préférable, car elle ne dépend pas de la résolution de l’écran, de la position des fenêtres ou de la présence d’un utilisateur connecté.

Capturer du HTML avec Playwright

Pour un fichier HTML ou une URL, la solution la plus souple consiste à utiliser un navigateur automatisé comme :

Playwright peut :

Playwright permet notamment de sauvegarder une capture d’écran avec page.screenshot() et de capturer toute la page avec l’option fullPage: true. [web:12]

Installation

npm install playwright
npx playwright install chromium

bon maintenant peux-tu écrire la totalité de ces documentation avec cette syntaxe que tu dois respecter scrupuleusement

# Convertir automatiquement des fichiers en images

## Objectif

Il est possible d’enregistrer un fichier texte, HTML ou PDF sous forme d’image.

Cela peut produire :

- Une image unique représentant tout le document.
- Une image par page.
- Une succession de captures d’écran pendant le défilement.
- Une capture d’une zone précise.
- Une capture d’un élément HTML particulier.

Il existe deux méthodes principales :

1. Convertir directement le document en images.
2. Automatiser de véritables captures d’écran.

La conversion directe est généralement préférable, car elle ne dépend pas de la résolution de l’écran, du positionnement des fenêtres ou de la présence d’un utilisateur connecté.

***

## Solution recommandée

| Type de fichier | Solution recommandée |
|---|---|
| HTML ou URL | Playwright |
| HTML utilisant JavaScript | Playwright |
| PDF | `pdftoppm` ou `pdftocairo` |
| Texte brut | Conversion en HTML puis Playwright |
| Plusieurs PDF | Script Bash avec `pdftoppm` |
| Plusieurs fichiers HTML | Script Node.js avec Playwright |
| Capture d’une fenêtre réelle | Outil de capture d’écran ou automatisation graphique |
| Utilisation manuelle | Fireshot, Firefox ou Screenpresso |

Pour un serveur Linux ou une automatisation régulière, la combinaison suivante est recommandée :

- **Playwright** pour HTML et les pages web.
- **pdftoppm** pour les PDF.
- **PHP** pour transformer les fichiers texte en HTML.
- **Bash** ou **cron** pour automatiser l’ensemble.

***

# Capturer du HTML avec Playwright

## Présentation

Playwright est un navigateur automatisable. Il peut ouvrir une URL ou un fichier HTML local, attendre le chargement du JavaScript et enregistrer une capture au format PNG ou JPEG.

Il permet notamment de :

- Capturer la partie visible d’une page.
- Capturer toute la page.
- Capturer uniquement un élément HTML.
- Définir la taille de la fenêtre.
- Faire défiler automatiquement une page.
- Générer une série d’images.
- Traiter des pages utilisant JavaScript.

La méthode officielle utilise `page.screenshot()` et l’option `fullPage: true` pour capturer la totalité d’une page déroulable. [1]

## Installation

```bash
npm install playwright
npx playwright install chromium
```

## Capture de la partie visible

```js
const { chromium } = require("playwright");

(async () => {
  const browser = await chromium.launch({
    headless: true
  });

  const page = await browser.newPage({
    viewport: {
      width: 1200,
      height: 900
    }
  });

  await page.goto("https://example.com", {
    waitUntil: "networkidle"
  });

  await page.screenshot({
    path: "capture.png"
  });

  await browser.close();
})();
```

La capture correspond ici à une fenêtre virtuelle de 1200 × 900 pixels.

## Capture d’un fichier HTML local

```js
const { chromium } = require("playwright");
const path = require("path");

(async () => {
  const browser = await chromium.launch({
    headless: true
  });

  const page = await browser.newPage({
    viewport: {
      width: 1200,
      height: 900
    }
  });

  const fichier = path.resolve("document.html");

  await page.goto(`file://${fichier}`, {
    waitUntil: "networkidle"
  });

  await page.screenshot({
    path: "document.png",
    fullPage: true
  });

  await browser.close();
})();
```

## Capture de toute la page

```js
await page.screenshot({
  path: "page-complete.png",
  fullPage: true
});
```

L’option `fullPage: true` capture toute la hauteur déroulable de la page, comme si elle était affichée sur un écran suffisamment haut. [1]

Cette méthode génère une seule image. Pour une très longue page, cette image peut être très haute.

## Capture d’un élément HTML

```js
await page.locator(".article").screenshot({
  path: "article.png"
});
```

Avec un identifiant HTML :

```js
await page.locator("#contenu").screenshot({
  path: "contenu.png"
});
```

Cette méthode permet de capturer uniquement :

- Un article.
- Un tableau.
- Une facture.
- Un graphique.
- Un bloc HTML.
- Une zone particulière de la page.

***

# Capturer une page par portions

Si l’on souhaite produire plusieurs images correspondant aux différentes zones visibles d’une page, il faut la faire défiler automatiquement.

## Exemple simple

```js
const { chromium } = require("playwright");

(async () => {
  const browser = await chromium.launch({
    headless: true
  });

  const page = await browser.newPage({
    viewport: {
      width: 1200,
      height: 900
    }
  });

  await page.goto("file:///chemin/vers/document.html", {
    waitUntil: "networkidle"
  });

  const hauteur = await page.evaluate(() => {
    return Math.max(
      document.body.scrollHeight,
      document.documentElement.scrollHeight
    );
  });

  const pas = 900;

  for (let y = 0, numero = 1; y < hauteur; y += pas, numero++) {
    await page.evaluate(position => {
      window.scrollTo(0, position);
    }, y);

    await page.waitForTimeout(200);

    await page.screenshot({
      path: `capture-${String(numero).padStart(3, "0")}.png`
    });
  }

  await browser.close();
})();
```

Les fichiers produits seront par exemple :

```text
capture-001.png
capture-002.png
capture-003.png
capture-004.png
```

## Version avec dernière position corrigée

Lorsque la hauteur du document n’est pas un multiple exact de la hauteur de la fenêtre, la dernière capture peut être incomplète ou contenir une zone blanche.

La version suivante positionne également une capture tout en bas de la page.

```js
const { chromium } = require("playwright");

(async () => {
  const browser = await chromium.launch({
    headless: true
  });

  const page = await browser.newPage({
    viewport: {
      width: 1200,
      height: 900
    }
  });

  await page.goto("file:///chemin/vers/document.html", {
    waitUntil: "networkidle"
  });

  const hauteurFenetre = 900;

  const hauteurDocument = await page.evaluate(() => {
    return Math.max(
      document.body.scrollHeight,
      document.documentElement.scrollHeight
    );
  });

  const positions = [];

  for (
    let position = 0;
    position < hauteurDocument;
    position += hauteurFenetre
  ) {
    positions.push(position);
  }

  const dernierePosition = Math.max(
    0,
    hauteurDocument - hauteurFenetre
  );

  if (!positions.includes(dernierePosition)) {
    positions.push(dernierePosition);
  }

  for (let i = 0; i < positions.length; i++) {
    await page.evaluate(position => {
      window.scrollTo(0, position);
    }, positions[i]);

    await page.waitForTimeout(200);

    await page.screenshot({
      path: `capture-${String(i + 1).padStart(3, "0")}.png`
    });
  }

  await browser.close();
})();
```

## Masquer les éléments fixes

Les menus fixes, bandeaux de cookies ou en-têtes peuvent apparaître sur toutes les captures.

Ils peuvent être masqués avant la capture :

```js
await page.addStyleTag({
  content: `
    header,
    .menu-fixe,
    .cookie-banner {
      visibility: hidden !important;
    }
  `
});
```

Ou avec un sélecteur précis :

```js
await page.locator("header").evaluate(element => {
  element.style.visibility = "hidden";
});
```

***

# Convertir un PDF en images

## Installation de Poppler

Sous Debian ou Ubuntu :

```bash
sudo apt update
sudo apt install poppler-utils
```

L’outil `pdftoppm` convertit un fichier PDF en une image par page. [2]

## Conversion en PNG

```bash
pdftoppm -png -r 150 document.pdf page
```

Les fichiers produits seront :

```text
page-1.png
page-2.png
page-3.png
```

## Conversion en JPEG

```bash
pdftoppm -jpeg -r 150 document.pdf page
```

Les fichiers produits seront :

```text
page-1.jpg
page-2.jpg
page-3.jpg
```

## Choisir la résolution

La résolution est définie avec l’option `-r`.

```bash
pdftoppm -png -r 100 document.pdf page
```

```bash
pdftoppm -png -r 150 document.pdf page
```

```bash
pdftoppm -png -r 300 document.pdf page
```

Repères courants :

- `100 DPI` : aperçu rapide et fichiers légers.
- `150 DPI` : bon compromis pour une consultation à l’écran.
- `300 DPI` : meilleure qualité, fichiers plus volumineux.

## Convertir seulement certaines pages

```bash
pdftoppm -f 2 -l 5 -png -r 150 document.pdf page
```

Cette commande convertit les pages 2 à 5 incluses.

## Convertir une seule page

```bash
pdftoppm -f 1 -l 1 -singlefile -png document.pdf page
```

Le résultat sera :

```text
page.png
```

***

# Alternative avec pdftocairo

`pdftocairo` est également fourni par Poppler. Il peut convertir des PDF en PNG, JPEG, TIFF ou SVG. [3]

## Conversion en PNG

```bash
pdftocairo -png -r 150 document.pdf page
```

## Conversion en JPEG

```bash
pdftocairo -jpeg -r 150 document.pdf page
```

## Conversion en SVG

```bash
pdftocairo -svg document.pdf document.svg
```

Pour convertir des pages PDF en images, `pdftoppm` et `pdftocairo` sont généralement plus fiables qu’une capture de l’écran.

***

# Transformer un fichier texte en HTML

Un fichier texte brut doit être affiché dans un contexte graphique avant d’être enregistré sous forme d’image.

Une méthode simple consiste à générer une page HTML qui contient le texte.

## Exemple PHP

```php
<?php

$nomFichier = 'document.txt';

$texte = htmlspecialchars(
    file_get_contents($nomFichier),
    ENT_QUOTES | ENT_SUBSTITUTE,
    'UTF-8'
);

echo <<<HTML
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Document texte</title>
<style>
html,
body {
    margin: 0;
    padding: 0;
    background: #ffffff;
}

body {
    margin: 40px;
    color: #111111;
    font-family: monospace;
    font-size: 16px;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
</style>
</head>
<body>$texte</body>
</html>
HTML;
```

La fonction `htmlspecialchars()` est indispensable pour empêcher le contenu du fichier texte d’être interprété comme du HTML.

## Générer un fichier HTML

```bash
php texte-vers-html.php > document.html
```

Puis lancer le script Playwright :

```bash
node capture.js
```

***

# Traiter plusieurs PDF automatiquement

Le script suivant convertit tous les fichiers PDF présents dans le dossier courant.

```bash
#!/usr/bin/env bash

set -euo pipefail

mkdir -p images

for fichier in *.pdf; do
    nom="${fichier%.pdf}"

    mkdir -p "images/$nom"

    pdftoppm \
        -png \
        -r 150 \
        "$fichier" \
        "images/$nom/page"
done
```

Arborescence obtenue :

```text
images/
├── document-1/
│   ├── page-1.png
│   └── page-2.png
└── document-2/
    ├── page-1.png
    └── page-2.png
```

## Version supportant les noms contenant des espaces

```bash
#!/usr/bin/env bash

set -euo pipefail

mkdir -p images

find . -maxdepth 1 -type f -iname '*.pdf' -print0 |
while IFS= read -r -d '' fichier; do
    base=$(basename "$fichier")
    nom="${base%.*}"

    mkdir -p "images/$nom"

    pdftoppm \
        -png \
        -r 150 \
        "$fichier" \
        "images/$nom/page"
done
```

***

# Traiter plusieurs fichiers HTML

Le script suivant parcourt le dossier `html` et crée une image complète pour chaque fichier HTML.

```js
const fs = require("fs");
const path = require("path");
const { chromium } = require("playwright");

(async () => {
  const dossierEntree = path.resolve("html");
  const dossierSortie = path.resolve("images");

  fs.mkdirSync(dossierSortie, {
    recursive: true
  });

  const browser = await chromium.launch({
    headless: true
  });

  const fichiers = fs.readdirSync(dossierEntree)
    .filter(fichier => {
      return fichier.toLowerCase().endsWith(".html");
    });

  for (const fichier of fichiers) {
    const page = await browser.newPage({
      viewport: {
        width: 1200,
        height: 900
      }
    });

    const cheminHTML = path.join(dossierEntree, fichier);
    const nom = path.basename(fichier, ".html");
    const sortie = path.join(dossierSortie, `${nom}.png`);

    await page.goto(`file://${cheminHTML}`, {
      waitUntil: "networkidle"
    });

    await page.screenshot({
      path: sortie,
      fullPage: true
    });

    await page.close();
  }

  await browser.close();
})();
```

Arborescence attendue :

```text
html/
├── facture.html
├── rapport.html
└── article.html
```

Images générées :

```text
images/
├── facture.png
├── rapport.png
└── article.png
```

***

# Capturer des URL avec Shot Scraper

Shot Scraper est un outil en ligne de commande conçu pour automatiser la capture de pages web.

Il peut être intégré dans :

- Un script Bash.
- Une tâche cron.
- Un système de surveillance.
- Une procédure d’archivage visuel.
- Un traitement automatique d’URL.

Playwright est cependant plus flexible lorsqu’il faut contrôler précisément :

- Le défilement.
- Les cookies.
- L’authentification.
- Le chargement du JavaScript.
- La taille de la fenêtre.
- Le masquage d’éléments.
- Le nommage des fichiers.

***

# Logiciels graphiques

## Fireshot

Fireshot est une extension de navigateur permettant de capturer :

- La partie visible d’une page.
- Une zone sélectionnée.
- Une page web complète.

Les résultats peuvent notamment être enregistrés en PNG, JPEG ou PDF. [4]

## Firefox

Firefox possède une fonction intégrée de capture d’écran permettant de capturer une page web entière, y compris la partie située sous la zone visible.

## Screenpresso

Screenpresso permet de capturer manuellement une image ou une vidéo de l’écran. Il propose également des fonctions d’annotation et de partage. [5]

Ces logiciels sont pratiques pour un usage manuel. Pour une automatisation régulière, Playwright, `pdftoppm` ou `pdftocairo` sont généralement mieux adaptés.

***

# Rendu direct ou capture réelle de l’écran

## Rendu direct

Le document est converti directement par un moteur de rendu.

### Avantages

- Résultat reproductible.
- Fonctionnement possible sur un serveur.
- Pas besoin d’un écran physique.
- Adapté aux tâches cron.
- Résolution contrôlable.
- Pas de dépendance au positionnement des fenêtres.
- Meilleure fiabilité pour les traitements en série.

### Inconvénients

- Le résultat peut différer légèrement de l’affichage sur un écran réel.
- Certains comportements liés au bureau ou aux applications natives ne sont pas capturés.

## Capture réelle de l’écran

Le programme capture exactement ce qui est visible sur l’écran.

### Avantages

- Reproduit l’affichage réellement visible.
- Permet de capturer presque n’importe quelle application.
- Convient aux logiciels qui ne peuvent pas être convertis directement.

### Inconvénients

- Dépend de la résolution de l’écran.
- Peut nécessiter une session graphique.
- Les fenêtres peuvent être déplacées ou masquées.
- Le défilement est parfois moins fiable.
- L’automatisation est plus fragile.

***

# Nommage des fichiers

Pour faciliter le classement, il est conseillé d’utiliser un nom comprenant :

- Le nom du document.
- La date.
- Le numéro de page ou de capture.

Exemples :

```text
rapport-2026-08-21-page-001.png
rapport-2026-08-21-page-002.png
facture-2026-08-21-page-001.png
article-2026-08-21-capture-001.png
```

Cette organisation facilite :

- Le classement.
- La comparaison entre deux versions.
- La création d’archives.
- La mise en cache.
- La suppression des anciennes captures.
- L’intégration dans un site web.

***

# Automatisation avec cron

Pour exécuter régulièrement un script, utiliser `crontab`.

Modifier la crontab :

```bash
crontab -e
```

Exemple d’exécution tous les jours à 2 h 30 :

```cron
30 2 * * * /chemin/vers/script-capture.sh >> /var/log/capture.log 2>&1
```

Il est préférable d’utiliser des chemins absolus dans les scripts exécutés par cron.

Exemple :

```bash
/usr/bin/pdftoppm
/usr/bin/node
/home/utilisateur/projet/capture.js
```

***

# Nettoyage des anciennes images

Pour supprimer les images PNG âgées de plus de 30 jours :

```bash
find /chemin/vers/images \
    -type f \
    -name '*.png' \
    -mtime +30 \
    -delete
```

Pour afficher les fichiers avant de les supprimer :

```bash
find /chemin/vers/images \
    -type f \
    -name '*.png' \
    -mtime +30 \
    -print
```

Il est recommandé de tester la commande avec `-print` avant d’utiliser `-delete`.

***

# Exemple de chaîne complète

```text
document.html  -> Playwright -> document.png
document.txt   -> PHP -> document.html -> Playwright -> document.png
document.pdf   -> pdftoppm -> page-1.png, page-2.png, page-3.png
```

***

# Choix final recommandé

Pour un traitement automatisé fiable :

1. Utiliser Playwright pour les fichiers HTML et les pages web.
2. Utiliser `pdftoppm` pour transformer les PDF en images.
3. Transformer les fichiers texte en HTML avant de les capturer.
4. Utiliser Bash pour traiter plusieurs fichiers.
5. Utiliser cron pour planifier l’exécution.
6. Utiliser des noms de fichiers contenant la date et le numéro de page.
7. Utiliser `find` pour supprimer automatiquement les anciennes images.

Citations : [1] Screenshots https://playwright.dev/docs/screenshots [2] pdftoppm(1) — poppler-utils — Debian bullseye https://manpages.debian.org/bullseye/poppler-utils/pdftoppm.1.en.html [3] pdftocairo(1) — poppler-utils — Debian jessie https://manpages.debian.org/jessie/poppler-utils/pdftocairo.1.en.html [4] Page Captures d'écran Web - Fireshot - Chrome Web Store https://chromewebstore.google.com/detail/take-webpage-screenshots/mcbpblocgmgfnpjjppndjkmgjaogfceg?hl=fr [5] Capturer votre écran en images et vidéos avec Screenpresso https://www.screenpresso.com/fr/ [6] Screenshots | Playwright Python https://playwright.dev/python/docs/screenshots [7] Screenshots | Playwright https://playwright.dev/mcp/tools/screenshots [8] Screenshots - 全頁面螢幕截圖 https://playwright.tw/docs/screenshots [9] Playwright Screenshots - How to Take and Automate ... https://www.checklyhq.com/docs/learn/playwright/taking-screenshots/ [10] Java https://playwright.dev/java/docs/screenshots [11] Screenshots & PDF - Playwright https://playwright.dev/agent-cli/commands/screenshots-pdf [12] pdftoppm(1) — poppler-utils - bookworm https://manpages.debian.org/bookworm/poppler-utils/pdftoppm.1.en.html