Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
November 24, 2019 12:14 pm GMT

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();

Codesnacks Screenshot

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

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To