Instantly share code, notes, and snippets.

@remy /html-slides.js
Last active Nov 29, 2018

Embed
What would you like to do?
A basic-ish HTML slide to image generator.
const puppeteer = require('puppeteer');
const content = `
/* this injected CSS allows me to hide elememts on the page */
`;
const total = 142; // total number of slides
// pages is an array of numbers, unless you need
// a single page, which can be passed through on
// the command line, ie. node index.js 120
// otherwise pages will be an array [0 ... 141]
const pages = process.argv[2]
? [parseInt(process.argv[2], 10)]
: [...Array(total).keys()];
// generate the url for the slide number, in this
// case, the slides start at index 1 so I'm
// returning the correct url for the slide.
const url = n => `https://talks.zx.isthe.link/#${n + 1}`;
const getPage = async (page, n) => {
await page.goto(url(n), {
waitUntil: ['load', 'domcontentloaded', 'networkidle2'],
});
await page.addStyleTag({ content }); // add the CSS
console.log('capture #%s', n);
await page.screenshot({
path: `slides-${n}.jpg`,
type: 'jpeg',
quality: 100,
});
};
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
page.setViewport({
width: 1280,
height: 800,
deviceScaleFactor: 2,
});
// a promise waterfall, will get one page
// at a time, waiting for the promise to
// settle before running the next
await pages.reduce((acc, curr) => {
return acc.then(async () => await getPage(page, curr))
}, Promise.resolve());
await browser.close();
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment