An Interest In:
Web News this Week
- March 19, 2024
- March 18, 2024
- March 17, 2024
- March 16, 2024
- March 15, 2024
- March 14, 2024
- March 13, 2024
How to take a screenshot of a webpage with JavaScript
Automatically creating a screenshot of a webpage used to be hard. Using puppeteer
it became quite simple. Puppeteer is a headless Chrome Node.js API. So you can programmatically do everything you can do everything with it programmatically, that you manually can do with the Chrome browser.
So let's create a screenshot of my blog over at codesnacks.
First, we'll have to install puppeteer of course. Run
npm i puppeteer
to install puppeteer.
const puppeteer = require("puppeteer");// we're using async/await - so we need an async function, that we can runconst run = async () => { // open the browser and prepare a page const browser = await puppeteer.launch() const page = await browser.newPage() // set the size of the viewport, so our screenshot will have the desired size await page.setViewport({ width: 1280, height: 800 }) await page.goto('https://codesnacks.net/') await page.screenshot({ path: 'codesnacks.png', fullPage: true }) // close the browser await browser.close();};// run the async functionrun();
That snippet will create a screenshot of the whole page, that's 1280 pixel wide. Of course, you can also set other sizes. The screenshot will be saved in the same directory your script lives in. You can change the directory and name of the file in the path
.
That's a super simple way to create screenshots. Please consider following me, if you're interested in what else you can do with puppeteer and if you don't want to miss any of my upcoming articles in this series.
Original Link: https://dev.to/benjaminmock/how-to-take-a-screenshot-of-a-page-with-javascript-1e7c
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To