chromium-fullpage-capture.html
HTML document, Unicode text, UTF-8 text
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4<meta charset="UTF-8"> 5<title> 6Chromium can do full-page screenshots 7</title> 8<link rel="stylesheet" href="/static/style.css"> 9<meta name="viewport" content="width=device-width, initial-scale=1.0"> 10</head> 11<body> 12<header> 13<nav> 14<ul> 15<li><a href="/">Home</a></li> 16<li><a href="/projects">Projects</a></li> 17<li><a href="/index">Index</a></li> 18<li><a href="/about">About</a></li> 19<li><a href="https://roundabout-host.com/roundabout">Roundabout-host</a></li> 20</ul> 21<ul> 22<li><a href="mailto:root@roundabout-host.com" id="mail-link">root@roundabout-host.com</a></li> 23</ul> 24</nav> 25</header> 26<main> 27 28<h1>Chromium can do full-page screenshots</h1> 29<div id="article-date">2025-05-04</div> 30<p class="tags"> 31 32<a href="/index/chromium.html" class="tag">chromium</a> 33 34<a href="/index/tips.html" class="tag">tips</a> 35 36</p> 37 38<figure> 39<img src="/static/photos/chromium-screenshot.png" alt="The option to take a screenshot in Chrome DevTools" id="article-image-header"> 40<figcaption>Pictured: The option to take a screenshot in Chrome DevTools</figcaption> 41</figure> 42 43<article class="content-area"> 44<p>I have seen few search results for this, so I thought it would be a good idea to share what I 45found out. By full-page screenshot I mean a screenshot that shows the page as if the viewport 46would fit the whole content. 47</p><p>I thought this would need extensions (of which all are nonfree, and I'm not trusting nonfree 48extensions for obvious reasons), but it looks like Chromium has had it all this time. It's not 49as beautiful as some other browsers, but it works. 50</p><ol><li><p>Open the Developer Tools on the page you want to screenshot. 51</p></li><li><p>Make sure the<em class="emphasis-1">Elements</em> pane is visible. 52</p></li><li><p>In that pane, select the <code><html></code> opening tag, right-click and choose 'Capture node 53screenshot'. 54</p></li><li><p>Save the resulting image where you want. 55</p></li></ol><p>This also works for any other HTML element, of course. 56</p> 57</article> 58 59</main> 60<footer> 61<p>Page generated on Sunday, 4 May 2025 at 14:10:58</p> 62<p xmlns:cc="http://creativecommons.org/ns#" >This work is marked with <a href="https://creativecommons.org/publicdomain/zero/1.0/?ref=chooser-v1" target="_blank" rel="license noopener noreferrer" style="display:inline-block;">CC0 1.0 Universal</a> (🄍). No rights reserved.</p> 63<p>Hosted at <a href="https://roundabout-host.com/roundabout">Roundabout-host</a> using the static site service, and generated with <a href="/projects/ampoule.html">Ampoule</a>.</p> 64<a href="#">Back to top</a> 65</footer> 66</body> 67</html>