Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@nsfw-filter/gif-frames

Package Overview
Dependencies
Maintainers
1
Versions
2
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@nsfw-filter/gif-frames

Pure JavaScript tool for extracting GIF frames and saving to file

  • 1.0.2
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

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/gif-frames@1.0.1?main=bundled"></script>

<!-- minified -->
<script src="https://unpkg.com/gif-frames@1.0.1?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:

NameTypeDescription
xIntegerImage Left Position
yIntegerImage Top Position
widthIntegerImage Width
heightIntegerImage Height
has_local_paletteBooleanImage local palette presentation flag
palette_offsetIntegerImage palette offset
palette_sizeIntegerImage palette size
data_offsetIntegerImage data offset
data_lengthIntegerImage data length
transparent_indexIntegerTransparent Color Index
interlacedBooleanInterlace Flag
delayIntegerDelay Time (1/100ths of a second)
disposalIntegerDisposal 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));

Keywords

FAQs

Package last updated on 25 Aug 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc