https://github.com/lijialiang/gifff

Get the first frame of a Gif image.
https://github.com/lijialiang/gifff

canvas webassembly

Last synced: 8 days ago
JSON representation

Get the first frame of a Gif image.

• Host: GitHub
• URL: https://github.com/lijialiang/gifff
• Owner: lijialiang
• License: mit
• Created: 2022-01-17T09:10:05.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2022-01-21T03:07:48.000Z (almost 3 years ago)
• Last Synced: 2024-04-28T19:45:11.152Z (7 months ago)
• Topics: canvas, webassembly
• Language: TypeScript
• Homepage:
• Size: 215 KB
• Stars: 3
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Gif First Frame ![](https://img.shields.io/npm/v/gifff?style=flat-square) ![](https://img.shields.io/npm/l/gifff?style=flat-square)

Get the first frame of a Gif image.

## Install

```sh

# yarn

yarn add gifff

# npm

npm install gifff

```

## Usage

### HTMLCanvasElement

```ts

import gifff from 'gifff/canvas'

/**

 * Use `HTMLCanvasElement` to get Gif First Frame

 *

 * @param {string|File} file - GifHttpUrl or GifLocalFile

 * @returns {Promise} PNG Blob

 */

const blob = await gifff(Gif)

document.getElementById('img').src = URL.createObjectURL(blob)

```

[Playground](https://jsbin.com/mowejon)

### WebAssembly

```ts

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} PNG base64

 */

const base64 = await gifff(Gif, {

  wasm: WASM_PATH

})

document.getElementById('img').src = base64

```

[Playground](https://jsbin.com/segunap)

## LICENSE

[MIT](LICENSE)