WebShot – NodeJS Full Web Page into an Image

Introduction: Capturing Web Pages using Node.js with WebShot

Capturing a website or a web page into an image is a fundamental requirement in various domains like e-commerce, e-learning, documentation, and debugging. This tutorial will help you understand how to achieve this using Node.js with WebShot, a library specifically designed for this purpose. We will take you through a step-by-step process of capturing a web page into an image.

What is WebShot?

WebShot is a Node.js module for taking screenshots of websites (HTTP/HTTPS). It uses a headless version of Chrome (Google) browser to capture the desired pages. It provides numerous options for customization, enabling you to fine-tune your screenshot captures as needed.

Why Choose Node.js with WebShot?

1. Concurrency: Node.js allows running multiple tasks concurrently, enabling fast screenshot capturing and optimal use of system resources.
2. Headless: Using a headless version of Chrome (Google) browser allows you to automate screenshots without requiring any display.
3. High-level Control: WebShot provides extensive control over your screenshot captures, enabling fine-grained customization of layout, style, and design elements.

Step-by-Step Tutorial:

Prerequisites

• Install Node.js on your machine if you haven't already.
• Familiarity with JavaScript is essential.
• Basic understanding of HTTP and HTML concepts.
• Optional: Basic familiarity with CSS and Web API (Application Programming Interface)

Step 1: Installing WebShot

Execute the following command in your terminal:

npm install webshot

Step 2: Capturing the Web Page

Here is an example code snippet showing how to capture a basic web page:

const webshot = require('webshot');
const url = 'http://example.com';

// Options for capturing
webshot(url, 'file', 'screenshot.jpg');

• This code snippet requires WebShot module.
• Set url to the page you want to capture. For this example, let's use 'http://example.com'.
• Capture the page and save the image as 'screenshot.jpg'.

Step 3: Customizing Screenshot Capture

Here are a few advanced customization examples to enhance your screenshot experience:

// 1. Capture Page as a PNG ( Default image type is JPEG)
const url = 'http://example.com';
const fileName = 'screenshot';
const options = { captureViewport: true, userAgent: 'Mozilla/5.0' };
webshot(url, 'file', `${fileName}.png`, options);

// 2. Set Image Resolution and Zoom
const url = 'http://example.com';
const fileName = 'screenshot';
const width = 1920; // set image width ( default is 800x600 )
const zoomFactor = 2.5; // set zoom (default is 1 )
const options = { 'res-width': width, zoom: zoomFactor, 'window-size': 1200, captureFooter: true };
webshot(url, 'file', `${fileName}.jpg`, options);

// 3. Add CSS selectors or Class names to specify captured parts
const url = 'http://example.com';
const fileName = 'screenshot';
const className = 'main-content';
const selector = '.main-section img'; // select images under class main-section
const options = { 
    select: `.${selector},${className}`, // using the selector to get class main-content and the sub-selection.main-section
    clip: true 
};
webshot(url, 'file', `${fileName}.png`, options);

In the advanced examples, you'll explore customizing screenshot captures based on specific needs:

• Resizing and zooming your image.
• Setting browser settings, like headers ( userAgent).
• Using CSS selectors (.main-content, [alt='myimage'], etc.) or classNames (className) to restrict capturing to specific page regions or elements.

Full Tutorial Code: Please feel free to try our step-by-step examples yourself!

Here's a quick script using WebShot, perfect for a first impression on Node.js screenshot automation, focusing on HTTP URL https://example.com;

const express = require('express');
const app = express();

// Import the required dependency - WebShot
const webshot = require('webshot');

// Test Route to demonstrate basic webpage capturing
app.get('/webshot', (req, res) => {

  // Capture page & return response as file, which we can name at 'screenshot'
  const url = 'http://example.com';  
  webshot(url, 'file', 'screenshot.jpg');

  res.set('Content-Type', 'image/jpeg');
  res.sendFile('screenshot.jpg');
});

app.listen(3000, function() {
  console.log('Webshot tutorial launched - visit http://localhost:3000/webshot for the captured webpage ( https://example.com ).');
});

Open the provided Node.js development server and access 'localhost:3000/webshot'. This route takes snapshots of 'https://example.com' as you view that website and save these pages' HTML to images of screenshots.

Remember that customizations in screenshot generation need adjustment to fit specific necessities like resolution, size zoom factor, captureFooter property.

By using the correct path, this step may look slightly different on Unix (or Unix-based Linux OS), while 'www.example.com' can point towards the file that web shot saves screenshot into:

chmod -R 777 tempDir # adjust as well with respect to local configurations.

# Using headless browsers and node for these scripts might take slightly.
node yourWebShotApplication.js

Have any questions? Want the answer to something we talked about? Feel free to inquire!

Remember: Each WebPage should have an Internet, like an active domain service on a specific browser where that WebShot might go after, the HTTP website which will serve Web-Apps like that; all websites and servers (services of data), your device’s own computer is hosting WebPage or site too.)