Gif First Frame

Get the first frame of a Gif image.

Install

# yarn
yarn add gifff
# npm
npm install gifff

Usage

HTMLCanvasElement

import gifff from 'gifff/canvas'

/**
 * Use `HTMLCanvasElement` to get Gif First Frame
 *
 * @param {string|File} file - GifHttpUrl or GifLocalFile
 * @returns {Promise<Blob>} PNG Blob
 */
const blob = await gifff(Gif)
document.getElementById('img').src = URL.createObjectURL(blob)

Playground

WebAssembly

import gifff from 'gifff/wasm'

/**
 * Use `WebAssembly` to get Gif First Frame
 *
 * @param {string|File} file - GifHttpUrl or GifLocalFile
 * @param {undefined|Object} options
 * @param {undefined|string} options.wasm WASM File Url
 * @returns {Promise<string>} PNG base64
 */
const base64 = await gifff(Gif, {
  wasm: WASM_PATH
})
document.getElementById('img').src = base64

Playground

LICENSE

MIT