Capturer une page entière
Créez un long screenshot pendant que Pinar contrôle le défilement, l’échelle et le contenu fixe répété.
3 minDans ce guide
Comment l’assemblage fonctionne
Pinar planifie les cadres de viewport, fait défiler le document, masque temporairement les éléments sticky ou fixed répétés, rend au device pixel ratio, puis restaure la page.
Quand le résultat diffère
Le contenu chargé à la demande, les mises en page animées, les cadres cross-origin et les pages qui changent pendant le défilement peuvent produire des trous ou des régions non résolues. Laissez la page se stabiliser, réessayez, ou capturez séparément la zone concernée.
Tuiles de viewport et restauration de mise en page
Pinar planifie les positions de défilement à partir de l’union des bornes de pins plus le padding, puis capture chaque tuile PNG de hauteur de viewport via l’API de screenshot de l’onglet. Les tuiles suivantes attendent brièvement pour que la page puisse peindre, et le canvas composé utilise le device pixel ratio déduit de la largeur de la première tuile par rapport au viewport CSS.
Avant la première tuile, les nœuds sticky et fixed sont réécrits afin de ne pas se répéter sur chaque cadre. Les styles inline d’origine et la position de défilement sont restaurés même si la composition échoue. Les coordonnées de pins et de masques sont décalées vers l’origine de capture avant le recadrage de l’image.
- Les nœuds fixed deviennent positionnés en absolute à la boîte mesurée, avec les transforms effacés afin que le screenshot ne les décale pas deux fois.
- Les nœuds sticky deviennent positionnés en relative pendant le passage de capture.
- Le défilement des tuiles utilise un scroll-behavior instant, afin que le document n’anime pas entre les cadres.