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

shashin

v0.0.6

Published

Capture responsive screenshots using PhantomJS

Downloads

17

Readme

shashin

Build Status

shashin (japanese: photograph) takes beautiful photos of websites in any resolution using PhantomJS.
It is heavily inspired by pageres but shashin has a much simpler API.

Features

  • Tested against Wikipedia's list of 100 most popular websites (minus NSFW). It can't capture all of them (timeouts and such) but it won't crash or throw.
  • Capture local files
  • Responsive screenshots
  • Page zoom
  • Kills hanging PhantomJS processes
  • Follows HTTP 3xx redirects
  • Stream interface
  • Request and process timeouts
  • Full-page or cropped screenshots
  • Delayed captures
  • Capture a single element instead of the whole page
  • HTTP basic authentication

Install

npm install shashin --save

API

Sample usage

var fs = require('fs');
var shashin = require('shashin');

var info = shashin('google.com', '1024x768', { delay: 1, crop: true });
var file = fs.createWriteStream('screenshot.png');

// Don't forget to handle errors
info.stream.on('error', function (err) {
  console.error(err);
});

info.stream.pipe(file);

info = shashin(url, resolution, options)

url

Either a full URL to the website, just a domain name, or a local file path.

resoluton

A string like "1024x768" that represents the browser window size, or an array with 2 entries like [1024,768], or an object like { width: 1024, height: 768}, or any device identifier supported by viewportsizes (see viewportsizes.com)

options

delay

Type: number
Default: 0

Delay in seconds before taking the screenshot after the page has loaded.

crop

Type: boolean
Default: false

If true the screenshot will be cropped to the viewport size.

selector

Type: string
Default: null

A CSS selector to capture only a specific DOM element.

zoomFactor

Type: number
Default: 1

Zoom factor of the page, zoom factor is zoom percent / 100, so 2 represents 200%.

timeout

Tye: number
Default: 30

Number of seconds until the request times out.

phantomTimeout

Tye: number
Default: 30

Number of seconds until the PhantomJS process is killed in case it hangs.

https

Type: boolean
Default: false

If true uses SSL/TLS protocol if not present in the url.

Return

Returns an object with all the necessary information to identify the screenshot and retreive the image data:

hash

Type: string

A hash of the internal instructions. Useful for file names or caching.

url

Type: string

The full URL to the captured site.

width

Type: number

Viewport width in pixels.

height

Type: number

Viewport height in pixels.

crop

Type: boolean

Whether the image was cropped.

delay

Type: number

Delay in seconds.

selector

Type: string

CSS selector used to capture a specific element.

zoomFactor

Type: number

The zoom factor.

stream

Type: Class: stream.Readable

A readable stream that provides the binary image data in PNG format.