Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/anishkny/webgif

Easily generate animated GIFs from websites
https://github.com/anishkny/webgif

animated-gifs automation gif puppeteer

Last synced: 27 days ago
JSON representation

Easily generate animated GIFs from websites

Host: GitHub
URL: https://github.com/anishkny/webgif
Owner: anishkny
Created: 2018-03-22T18:06:39.000Z (over 6 years ago)
Default Branch: main
Last Pushed: 2023-10-28T00:15:38.000Z (about 1 year ago)
Last Synced: 2024-05-11T02:32:56.797Z (6 months ago)
Topics: animated-gifs, automation, gif, puppeteer
Language: JavaScript
Homepage: https://webgif.netlify.com
Size: 91.8 KB
Stars: 103
Watchers: 4
Forks: 16
Open Issues: 14
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

awesome-puppeteer - webgif - Easily generate animated GIFs from websites. (Rendering and web scraping)
awesome-puppeteer-zh - webgif - 从网站轻松生成动画GIF. (渲染和网页抓取 / 贡献)

README

        


## *Easily generate animated GIFs from websites*

[![Build Status](https://travis-ci.org/anishkny/webgif.svg?branch=master)](https://travis-ci.org/anishkny/webgif)

[![Build status](https://ci.appveyor.com/api/projects/status/ji5c66ex9ifog9hk/branch/master?svg=true)](https://ci.appveyor.com/project/anishkny/webgif/branch/master)

[![Greenkeeper badge](https://badges.greenkeeper.io/anishkny/webgif.svg)](https://greenkeeper.io/)

[![Coverage Status](https://coveralls.io/repos/github/anishkny/webgif/badge.svg)](https://coveralls.io/github/anishkny/webgif)

![node](https://img.shields.io/node/v/webgif.svg)

[![NPM Version](https://img.shields.io/npm/v/webgif.svg)](https://www.npmjs.com/package/webgif)

* **Easy**            👉  *Just point it to a URL and get an animated GIF!*

* **Cross-platform**  👉  *Works on Windows, Mac, Linux, without Docker!*

* **Headless**        👉  *Uses [GoogleChrome/puppeteer](https://github.com/GoogleChrome/puppeteer)*

* **Inspired**        👉  *By [asciicast2gif](https://github.com/asciinema/asciicast2gif) and wanting to make it easier to use*

### Installation

```bash

yarn global add webgif || npm i -g webgif

```

### Usage

To navigate to `https://giphy.com/search/lol` and make an animated GIF of duration `10` seconds, execute:

```bash

webgif -u https://giphy.com/search/lol -d 10

Navigating to URL: https://giphy.com/search/lol

Taking screenshots: .............

Encoding GIF: /home/user/web.gif

```

### Options

```bash

webgif -u URL -d DURATION [-o OUTFILE]

Options:

  --url, -u       URL to generate GIF from

                                       [default: "https://giphy.com/search/lol"]

  --duration, -d  GIF duration in seconds                          [default: 10]

  --output, -o    Output file name

                             [default: "web.gif"]

  -h, --help      Show help                                            [boolean]

  -V, --version   Show version number                                  [boolean]

```

### Sample GIF

![Sample GIF](https://storage.googleapis.com/webgif/web.gif)

### How it works

1. Use [Puppeteer](https://github.com/GoogleChrome/puppeteer) to launch a headless Chrome window

1. Use `setInterval` to take screenshots and save them to disk

1. Navigate to target URL and wait for specified duration

1. Use [gifencoder](https://github.com/eugeneware/gifencoder) and [png-file-stream](https://github.com/eugeneware/png-file-stream) to create animated GIF out of saved screenshots

See code: [`index.js`](https://github.com/anishkny/webgif/blob/master/index.js)