Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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 10Navigating 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 screenshotsSee code: [`index.js`](https://github.com/anishkny/webgif/blob/master/index.js)