screenshot - GitLite

KO | EN

gitlite — search

#hacktoberfest #react #llm #go #golang #machine-learning #deep-learning #docker #macos #java #awesome #awesome-list #ios #openai

screenshot

(★ 158)

A screenshot API to convert web to image or PDF. Supports desktop and mobile views.

File Explorer

Download Latest Version (.zip)

- FUNDING.yml
- index.js
- error-400.png
- error-500.png
- screenshot-desktop.png
- screenshot-mobile.png
- screenshot-pdf.png
.gitignore
.prettierrc
browser.js
Dockerfile
index.js
LICENSE
package-lock.json
package.json
README.md
screenshot.js
validator.js
vercel.json

# Installation Guide

1. Get the code

git clone https://github.com/staticallyio/screenshot

Downloads the entire project code from GitHub to your computer.

cd screenshot

Moves into the project folder you just downloaded.

2. Docker

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Docker Desktop Needed to build and run containers. Install it and keep it running in the background.

docker run -d \

Runs the built image as an actual container.

<a href="https://hub.docker.com/r/statically/screenshot">

Type this command into your terminal and run it.

<img src="https://img.shields.io/docker/cloud/build/statically/screenshot" alt="Docker Cloud Build Status" />

Type this command into your terminal and run it.

<img src="https://img.shields.io/docker/pulls/statically/screenshot?color=success" alt="Docker Pulls" />

Type this command into your terminal and run it.

<img src="https://img.shields.io/docker/image-size/statically/screenshot/latest?color=success" alt="Docker Image Size" />

Type this command into your terminal and run it.

✅ Run docker compose ps to check the containers are Up. If the README mentions a port, open http://localhost:PORT in your browser.

Pulled directly from this repo's README.

3. Node.js

Easy

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

npm install

Downloads and installs the libraries listed in package.json.

npm start

Starts the development/run server.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<p align="center">
  <a href="https://statically.io/screenshot/">
    <img src="https://cdn.statically.io/img/statically.io/images/branding/statically-mark.svg" alt="Screenshot" height="80"/>
  </a>
</p>

<h1 align="center">Screenshot</h1>

<p align="center">Automagically converts URLs into images and PDFs.</p>

<p align="center">
  <a href="https://statically.io">statically.io</a> |
  <a href="https://twitter.com/staticallyio">Twitter</a> |
  <a href="https://statically.discourse.group">Community</a> |
  <a href="https://www.patreon.com/fransallen">Become A Backer</a>
  <br /><br />
	<a href="https://hub.docker.com/r/statically/screenshot">
    <img src="https://img.shields.io/docker/cloud/build/statically/screenshot" alt="Docker Cloud Build Status" />
  </a>
  <a href="https://hub.docker.com/r/statically/screenshot">
    <img src="https://img.shields.io/docker/pulls/statically/screenshot?color=success" alt="Docker Pulls" />
  </a>
  <a href="https://hub.docker.com/r/statically/screenshot">
    <img src="https://img.shields.io/docker/image-size/statically/screenshot/latest?color=success" alt="Docker Image Size" />
  </a>
</p>

## :sparkles: Overview

**Screenshot** is a simple application to automagically convert URLs into images and PDFs. It's designed to be simple and easy to install anywhere. This application is split into two distinct components, the core service to process the URL and then send it to a remote browser (Chrome). The remote browser to screenshot and generate PDF from a URL.

## :bulb: Features

- Screenshot website in desktop view.
- Screenshot website in mobile view.
- Converts URL into PDF.

## :zap: Installation

We'll be using Docker as an easy way to install. However since this is a Node.js application, you can run it with your current setup, if you choose this method, please see [config/index.js](config/index.js) to change the remote browser endpoint.

### Run the browser

We'll be using the **browserless/chrome** Docker image to do most of this work.

```bash
docker run -d \
  --name chrome \
  -e "ENABLE_DEBUGGER=false" \
  -e "DISABLE_AUTO_SET_DOWNLOAD_BEHAVIOR=true" \
  -e "DEFAULT_BLOCK_ADS=true" \
  -p 3000:3000 \
  browserless/chrome:latest
```

To see more options, you can check [full documentation](https://docs.browserless.io/docs/docker.html).

### Run the app

```bash
docker run -d \
  --name screenshot \
  -e "REMOTE_BROWSER=ws://172.17.0.1:3000" \
  -p 5000:5000 \
  statically/screenshot:latest
```

Replace the `REMOTE_BROWSER` variable with the remote browser endpoint that you set above. In this example we are using Docker's internal IP address, it should work if you are running both components on one machine.

## :fire: Fire it up

The application avalaible through `/screenshot/` path.

- Visit http://localhost:5000/screenshot/github.com for desktop view.

![Screenshot Desktop](https://cdn.statically.io/gh/staticallyio/screenshot/master/public/screenshot-desktop.png)

- Visit http://localhost:5000/screenshot/mobile/github.com for mobile view.

![Screenshot Mobile](https://cdn.statically.io/gh/staticallyio/screenshot/master/public/screenshot-mobile.png)

- Visit http://localhost:5000/screenshot/pdf/news.ycombinator.com for PDF.

![Screenshot PDF](https://cdn.statically.io/gh/staticallyio/screenshot/master/public/screenshot-pdf.png)