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

@clicks/gif-frames

v2.0.2

Published

Pure JavaScript tool for extracting GIF frames and saving to file

Downloads

14

Readme

gif-frames

A pure JavaScript tool for extracting GIF frames and saving to file. Works in Node or the browser. Uses get-pixels and save-pixels under the hood.

NPM

Install

npm install gif-frames

CDN scripts

If you're not using npm, you can include one of these in your HTML file:

<!-- unminified -->
<script src="https://unpkg.com/[email protected]?main=bundled"></script>

<!-- minified -->
<script src="https://unpkg.com/[email protected]?main=bundled-min"></script>

This will expose gifFrames as a global variable.

require('gif-frames')(options[, callback])

var gifFrames = require('gif-frames');
var fs = require('fs');

gifFrames({ url: 'image.gif', frames: 0 }).then(function (frameData) {
  frameData[0].getImage().pipe(fs.createWriteStream('firstframe.jpg'));
});

Options:

  • url (required): The pathname to the file, or an in-memory Buffer
  • frames (required): The set of frames to extract. Can be one of:
  • outputType (optional, default 'jpg'): Type to use for output (see type for save-pixels)
  • quality (optional): Jpeg quality (see quality for save-pixels)
  • cumulative (optional, default false): Many animated GIFs will only contain partial image information in each frame after the first. Specifying cumulative as true will compute each frame by layering it on top of previous frames. Note: the cost of this computation is proportional to the size of the last requested frame index.

The callback accepts the arguments (error, frameData).

Returns:

A Promise resolving to the frameData array (if promises are supported in the running environment)

frameData

An array of objects of the form:

{
  getImage,
  frameIndex,
  frameInfo
}

getImage()

Returns one of:

  • A drawn canvas DOM element, if options.outputType is 'canvas'
  • A data stream which can be piped to file output, otherwise

frameIndex

The index corresponding to the frame's position in the original GIF (not necessarily the same as the frame's position in the result array)

frameInfo

It is an Object with metadata of the frame. Fields:

Name|Type|Description ----|-----|----------- x | Integer | Image Left Position y | Integer | Image Top Position width | Integer | Image Width height | Integer | Image Height has_local_palette | Boolean | Image local palette presentation flag palette_offset | Integer | Image palette offset palette_size | Integer | Image palette size data_offset | Integer | Image data offset data_length | Integer | Image data length transparent_index | Integer | Transparent Color Index interlaced | Boolean | Interlace Flag delay | Integer | Delay Time (1/100ths of a second) disposal | Integer | Disposal method

See GIF spec for details

Examples

Writing selected frames to the file system in Node:

var gifFrames = require('gif-frames');
var fs = require('fs');

gifFrames(
  { url: 'image.gif', frames: '0-2,7', outputType: 'png', cumulative: true },
  function (err, frameData) {
    if (err) {
      throw err;
    }
    frameData.forEach(function (frame) {
      frame.getImage().pipe(fs.createWriteStream(
        'image-' + frame.frameIndex + '.png'
      ));
    });
  }
);

Drawing first frame to canvas in browser (and using a Promise):

var gifFrames = require('gif-frames');

gifFrames({ url: 'image.gif', frames: 0, outputType: 'canvas' })
  .then(function (frameData) {
    document.body.appendChild(frameData[0].getImage());
  }).catch(console.error.bind(console));