npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@webshotapi/client

v2.0.10

Published

Take screenshot and save image in JPG, PNG, PDF. You can also extract selectors for all HTML elements with coordinates and css styles after browser rendering. Remove cookies popup before take screenshot

Downloads

73

Readme

WebShotApi.com API client for NodeJS/Typescript

Capture a screenshot and save the image in formats like JPG, PNG, or PDF. Additionally, you have the capability to retrieve selectors for every HTML element, complete with coordinates and CSS styles following browser rendering. Utilize our API to establish a project and submit your URLs to the queue. Our server will handle all the necessary tasks on your behalf.

Full documentation about our api you can find in this website Website screenshot API DOCS

Installation

Use the package manager NPM to install our client in nodejs.

npm install @webshotapi/client

or

yarn add @webshotapi/client

Remove cookies popup before take sceenshot

Remove cookies before take screenshot

Utilize an innovative AI algorithm to seamlessly eliminate the obstructive cookies popup before capturing a screenshot. Read more

API KEY

Api key you can generate after register. https://dashboard.webshotapi.com/api_keys

Usage

Take screenshot and save jpg to file

const { Client } = require('@webshotapi/client');

//Image download
const API_KEY = "YOUR TOKEN HERE";
(async()=>{
    try{
        const client = new Client(API_KEY);
        const result = await client.screenshot('https://www.example.com', {
            remove_modals: true, // Remove cookies popup
            width: 1920,
            no_cache: 1 // Do not return response file from cache
        });
        
        //save screenshot to file
        await result.save('/tmp/screenshot_test.jpg');
    }catch(e){
        console.log("Error", e);
    }
})();

Take screenshot and save PDF to file

You can covert your html page to invoice in PDF.

const { Client } = require('@webshotapi/client');

//Image download
const API_KEY = "YOUR TOKEN HERE";
(async()=>{
    try{
        const client = new Client(API_KEY);
        const result = await client.pdf('https://www.example.com', {
            remove_modals: true,
            width: 1920,
            no_cache: true
        });
        
        //save screenshot to file
        await result.save('/tmp/screenshot_test.pdf');
    }catch(e){
        console.log("Error", e);
    }
})();

Extract words map and HTML elements with css styles after rendering

Unique software to extract all selectors for HTML elements from website with css styles after browser rendering. Additionally you can extract all words with position (x,y,width, height, offset from previous word). Thank that you can build words map of website.

Sample script:

const { Client } = require('@webshotapi/client');

//Image download
const API_KEY = "YOUR TOKEN HERE";
(async()=>{
    try{
        const client = new Client(API_KEY);
        const result = await client.extract('https://www.example.com', {
            "remove_modals": 1,
            "ads": 1,
            "width": 1680,
            "height": 960,
            "extract_selectors": 1,
            "extract_words": 1,
            "extract_style": 1,
            "extract_text": 1,
            "extract_html": 1,
        });
        
        //get json data
        let data = result.json();
        
        //show result data
        console.log(data);

        //save data to file
        result.save('/tmp/test.json');
    }catch(e){
        console.log("Error", e);
    }

Results

{
  "selectors": [
    {
      "xpath": "/html[1]",
      "css_selector": "html",
      "x": 0,
      "y": 0,
      "w": 1920,
      "h": 413,
      "style": {
        "visibility": "visible",
        "display": "block",
        "fontWeight": "400",
        "backgroundImage": "none",
        "backgroundColor": "rgba(0, 0, 0, 0)",
        "cursor": "auto",
        "fontSize": "16px",
        "color": "rgb(0, 0, 0)",
        "position": "static",
        "textDecoration": "none solid rgb(0, 0, 0)",
        "textDecorationLine": "none",
        "textDecorationColor": "rgb(0, 0, 0)",
        "textDecorationStyle": "solid",
        "textDecorationThickness": "auto",
        "bottom": "auto",
        "top": "auto",
        "left": "auto",
        "right": "auto",
        "zIndex": "auto",
        "opacity": "1",
        "backgroundRepeat": "repeat",
        "borderWidth": "0px",
        "textAlign": "start",
        "marginLeft": "0px",
        "marginRight": "0px",
        "marginTop": "0px",
        "marginBottom": "0px",
        "paddingLeft": "0px",
        "paddingRight": "0px",
        "paddingTop": "0px",
        "paddingBottom": "0px",
        "overflow": "visible",
        "textIndent": "0px",
        "textTransform": "none",
        "letterSpacing": "normal",
        "fontFamily": "\"Times New Roman\""
      },
      "attributes": {}
    }
  ],
  "words": [
    {
      "word": "permission.",
      "position": {
        "x": 660,
        "y": 231,
        "w": 92,
        "h": 19
      },
      "word_index": 26,
      "xpath": "/html[1]/body[1]/div[1]/p[1]",
      "offset": 145
    }
  ],
  "page_properties": {
    "viewport": {
      "width": 1920,
      "height": 1080
    },
    "document": {
      "width": 1920,
      "height": 1080
    }
  },
  "html": "<!doctype html><html lang='en' dir='ltr'><head><base hr...",
  "text": "Welcome in our page\nToday is Monday...",
  "screenshot_url": "https://api.webshotapi.com/v1/screenshot/?token=....&width=1920&height=960",
  "status_code": 200
}

API docs

Full documentation about our api you can find in this website API DOCS Nodejs client docs: https://webshotapi.com/docs/sdk/nodejs/

License

MIT