https://github.com/innoq/hotshot

Takes screenshots of DOM elements
https://github.com/innoq/hotshot

chrome docker dom html puppeteer

Last synced: about 1 month ago
JSON representation

Takes screenshots of DOM elements

• Host: GitHub
• URL: https://github.com/innoq/hotshot
• Owner: innoq
• License: apache-2.0
• Created: 2018-03-16T12:37:33.000Z (almost 7 years ago)
• Default Branch: main
• Last Pushed: 2023-02-04T07:10:38.000Z (almost 2 years ago)
• Last Synced: 2024-04-14T13:58:40.779Z (9 months ago)
• Topics: chrome, docker, dom, html, puppeteer
• Language: JavaScript
• Size: 516 KB
• Stars: 19
• Watchers: 66
• Forks: 10
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Hotshot

Takes screenshots of DOM elements, like Jake Gyllenhaal 📸

Check out the [blog post](https://www.innoq.com/en/blog/screenshot-dom-elements-puppeteer/).

## Start (without Docker)

Make sure you've got a current node and yarn installed. Then:

    $ yarn install

    $ TARGET_HOST="https://www.innoq.com" yarn start

## Start (with Docker)

Build image:

    $ docker build -t innoq/hotshot .

Start server:

    $ docker run --init -p 5000:5000 -e PORT=5000 -e TARGET_HOST='https://www.innoq.com' innoq/hotshot

## Request a screenshot

    $ curl -G "http://localhost:5000/shoot?path=/relative/path&selector=.my-css-class" > screenshot.jpeg

## Content negotiation

Hotshot can serve webp images if requested in the `Accept` header. Example:

    $ curl -G -H "accept: image/webp" "http://localhost:5000/shoot?path=/relative/path&selector=.my-css-class" > screenshot.webp

Please note: any Accept header values not directly specifying webp support (e. g. `*/*`) automatically get served jpeg.