WebsShot

WebsShot is a simple package that allows you to take screenshot of given HTML code.

Features

• Simple
• Fast
• Allows you to remove tags, attributes
• Supports markdown

Preview

Installing

npm i --save websshot

Getting started

• Load WebsShot

  const WebsShot = require("websshot");
  const window = new WebsShot();

• Load HTML

  window.load("<h1>Hello World</h1>");

• Take screenshot

  await window.screenshot();

• Save as image

  let data = await window.screenshot();
  fs.writeFileSync("./myimage.png", data);

Basic Example

const WebsShot = require("websshot");
const window = new WebsShot();
const fs = require("fs");

window.load("<h1>Hello World</h1>");
window.screenshot().then((data) => {
  fs.writeFileSync("./image.png", data);
});

Using Markdown

const WebsShot = require("websshot");
const window = new WebsShot();
const fs = require("fs");

window.load("# Hello World", true);
window.screenshot().then((data) => {
  fs.writeFileSync("./image.png", data);
});

Using both html & markdown

const WebsShot = require("websshot");
const window = new WebsShot();
const fs = require("fs");

window.load("# Hello World<br><br><h2>Goodbye world</h2>", true);
window.screenshot().then((data) => {
  fs.writeFileSync("./image.png", data);
});

Removing script tag from the loaded code

(will return blank picture)

const WebsShot = require("websshot");
const window = new WebsShot({
  removeTags: ["script"],
});
const fs = require("fs");

window.load("<script>location.href = 'https://youtube.com'</script>");
window.screenshot().then((data) => {
  fs.writeFileSync("./image.png", data);
});

API

WebsShot({ options }, { puppeteerOptions })

Creating a new instance of WebsShot allows you to load & capture screenshot. You can create a new instance using this code:

const WebsShot = require("websshot");
const window = new WebsShot();

WebsShot accepts these options: options.removeTags: This option allows you to remove provided tags before loading the code. Value for this option must be Array. Example:

new WebsShot({
  removeTags: ["script"],
});

options.removeAttributes: This option allows you to remove certain attributes from the code. Value for this option must be Array. Example:

new WebsShot({
  removeAttributes: ["onload"],
});

options.height: You can set window height here. Value for this option must be Number. Example:

new WebsShot({
  height: 800,
});

options.width: You can set window width here. Value for this option must be Number. Example:

new WebsShot({
  width: 1280,
});

puppeteerOptions: You can supply options for puppeteer.launch() here. Value for this option must be Object. Example:

new WebsShot(
  {
    width: 1920,
    height: 1080,
  },
  {
    args: ["--no-sandbox"],
  }
);

WebsShot.setUserAgent(userAgent)

This method allows you to set custom user agent.

WebsShot.load(code, markdown=false)

This method allows you to load your HTML or Markdown code. Code type must be a String. First parameter takes your code and second parameter takes a Boolean value. If second parameter is set to true, it will render markdown too. Example:

const WebsShot = require("websshot");
const window = new WebsShot();

window.load("<h1>Hello World</h1>");

WebsShot.loadFromFile(path, markdown=false)

This method allows you to load your HTML or Markdown code from a file. First parameter takes your file path and second parameter takes a Boolean value. If second parameter is set to true, it will render markdown too. Example:

const WebsShot = require("websshot");
const window = new WebsShot();

window.loadFromFile("./index.html");

window.screenshot().then((data) => fs.writeFileSync("./htmltest.png", data));

WebsShot.html()

This method allows you to get the loaded HTML code. It might be different from the original code. Example:

const WebsShot = require("websshot");
const window = new WebsShot();

window.load("<h1>Hello World</h1>");

console.log(window.html());

WebsShot.screenshot(url=false, options)

This method allows you to take screenshot of any website or the loaded html. url website url. Set it to false if you want to capture loaded html. By default, it is false. options are the options for Puppeteer.PageScreenshotOptions. Example:

1. Website

const WebsShot = require("websshot");
const window = new WebsShot();

window
  .screenshot("https://youtube.com")
  .then((data) => fs.writeFileSync("./youtube.png", data));

2. HTML

const WebsShot = require("websshot");
const window = new WebsShot();

window.load("<h1>Hello World</h1>");

window.screenshot().then((data) => fs.writeFileSync("./htmltest.png", data));

WebsShot.version

Current version of WebsShot. You may not use this after instantiating WebsShot class. Example:

const WebsShot = require("websshot");
console.log(WebsShot.version);

Created and maintained by

Snowflake107

Join my discord server

Snowflake Studio ❄