Objective:
This article addresses the need to create a thumbnail of a given website URL, in a backend context. To that end we'll be using nodeJS and puppeteer.
Implementation:
When I tried to do this, I actually had to install chrome manually. You might skip this step, but remember to come here later if something doesnt work.On the command line do:
sudo apt-get install chromium-browser
Navigate to your project folder, and use node package manager to install puppeteer:
npm i puppeteer
Here is the code for this project, you can >vim sitethumb.js:
// ########################################################################
const puppeteer = require('puppeteer');
// ########################################################################
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
// ########################################################################
let options = {
executablePath: '/usr/bin/chromium-browser'
};
puppeteer.launch(options).then(async browser => {
const page = await browser.newPage();
page.on('request', msg => console.log(msg.url));
await page.goto('http://thepage.com', {
waitUntil: 'networkidle0'
});
await sleep(1000);
await page.screenshot({
path: './screenshot.png'
});
await browser.close();
}, e => {
console.log(e);
})
Let's see what that code does. On line [3] we import the puppeteer package.
On line [6] we define the sleep function, using a promise trick, so we can wait for the site to render fully.
On lines [11-13] we define the options to pass onto puppeteer, and this is related to the problem I had where I needed to install chrome manually (see above). Due to that I pass the full path to chrome on the options. Make sure you pass the correct path in your code.
On line [15] puppeteer is launched, and on line (18) you can change the URL from http://thepage.com to whatever you require in your program.
After a pause of one second on line [23] we export a screenshot on line [26]. Here, also, you can change the name of the exported file to whatever you want.
Finally, we close the browser object, and the rest of this snippet deals with puppeteer errors.
Conclusion:
This is my first article on the site but I still hope that you found it usefull.Leave your thoughts, corrections, additions in the comments below. Thank you.
HugoJustCode
Cookies