Get the first frame of a Gif image.

Overview

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
    } 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
    } PNG base64
 */
const base64 = await gifff(Gif, {
  wasm: WASM_PATH
})
document.getElementById('img').src = base64

Playground

LICENSE

MIT

You might also like...

Doblar - a fully local image converter that runs in your browser

Doblar - a fully local image converter that runs in your browser

Doblar is a fully local image converter that runs in your browser. Doblar is purely client side: nothing is uploaded to a server or anything like that. All conversions take place in your browser, which means your files never leave your computer.

Dec 17, 2022

A simple image diff tool powered by avernakis.

A simple image diff tool powered by avernakis.

Image Diff English | 简体中文 Introduction This is the tutorial project of Avernakis UI. Tiny, but production ready. Install Use npm as nam! (Node App Man

Dec 3, 2022

jQuery plugin for 'responsive cropping'. Dynamically crop images to fill available space without cutting out the image's subject. Great for full-screen images.

jQuery plugin for 'responsive cropping'. Dynamically crop images to fill available space without cutting out the image's subject. Great for full-screen images.

jQuery plugin for 'responsive cropping'. Dynamically crop images to fill available space without cutting out the image's subject. Great for full-screen images.

Dec 30, 2022

⚡️The Fullstack React Framework — built on Next.js

⚡️The Fullstack React Framework — built on Next.js

The Fullstack React Framework "Zero-API" Data Layer — Built on Next.js — Inspired by Ruby on Rails Read the Documentation “Zero-API” data layer lets y

Jan 4, 2023

MagicCap is a image/GIF capture suite for Mac and Linux

MagicCap is a image/GIF capture suite for Mac and Linux

MagicCap is a image/GIF capture suite for Mac and Linux. You can get a precompiled copy from the releases page of this GitHub page.

Sep 15, 2022

optimize image & upload file to cloud as image bed with tiny image automic.

optimize image & upload file to cloud as image bed with tiny image automic.

Rush! 图片压缩 & 直传图床工具 这是一个兴趣使然的项目, 希望 Rush! 能让这个世界的网络资源浪费减少一点点 下载 Downloads 获取最新发行版 功能 Features 拖拽批量压缩图片, 支持格式 jpg/png/gif Drop to optimize, jpg/png/gif

Nov 12, 2022

A terminal-to-gif recorder minus the headaches.

A terminal-to-gif recorder minus the headaches.

ttystudio A terminal-to-gif recorder minus the headaches. Record your terminal and compile it to a GIF or APNG without any external dependencies, bash

Dec 23, 2022

Merhaba Discord.js Sever; GIF-PP Sunucun mu var. Insanların Paylaşımlarını kontrol altına mı almak istiyorsun o halde bu altyapı tam sana göre ✨

Merhaba Discord.js Sever; GIF-PP Sunucun mu var. Insanların Paylaşımlarını kontrol altına mı almak istiyorsun o halde bu altyapı tam sana göre ✨

Bilgilendirme • Bu altyapı Serendia Squad sunucusu için Stark#9716 tarafından hazırlanmıştır. • Merhaba Discord.Js Severler öncelikle nasılsınız umarı

Dec 15, 2021

New multilingual Discord Gif BOT with MongoDB, economy and market system

multilingual niyuki-gif-bot but v13 (/w MongoDB, Economy and Market) One of the most advanced Discord Gif BOT with MongoDB, Economy and Market System

Sep 26, 2022

A generative engine that takes various png layers on a sprite sheet format, combines them and then converts them into a .gif file

A generative engine that takes various png layers on a sprite sheet format, combines them and then converts them into a .gif file

Welcome to the Generative GIF Engine v2.0.4 🐤 [8 minute read] This python and node app generates layered-based gifs to create NFT gif art! It is fast

Jan 2, 2023

A generative engine that takes various png layers on a sprite sheet format, combines them and then converts them into a .gif file

A generative engine that takes various png layers on a sprite sheet format, combines them and then converts them into a .gif file

Welcome to the Generative Animated Engine v3.0.1 🐤 [8 minute read] This repo used to be called jalagar/Generative_Gif_Engine but because it now suppo

May 24, 2022

A JavaScript plugin to turn many images into a gif

A JavaScript plugin to turn many images into a gif

GiffyImages A JavaScript plugin to turn many elements images into a gif magically. Preview Getting started npm i giffy-images -D or yarn add giffy-im

Nov 6, 2021

A-Frame Rainfall effect component

A-Frame Rainfall effect component

A-Frame Rain component aframe-rain is Rainfall effect component for A-Frame which displays a lot of rain drop/splash objects by using instancing techn

Dec 19, 2021

A-Frame components implementing multiple cameras

aframe-multi-camera multi-camera.mp4 Overview This repository contains components that can be used to create multi-camera scenes in A-Frame. Cameras c

Oct 10, 2022

A-Frame Element is a simple library for building fast, lightweight web components for 3D development

A-Frame Element is a simple library for building fast, lightweight web components for 3D development

aframe-element is a library inspired from the very nice library Polymer lit to map A-Frame AR / VR / 3D elements on typescript classes like Angular/React/Lit.

May 31, 2022

Minimalist Web XR Location Based Markers for A-Frame 1.3.0

LBAR.js “I understand how the engines work now. It came to me in a dream. The engines don't move the ship at all. The ship stays where it is and the e

Dec 3, 2022

A-Frame components for smooth locomotion and snap turning

A-Frame components for smooth locomotion and snap turning

A-Frame locomotion A collection of A-Frame components, systems and primitives that enable all sorts of locomotion in VR. It't built to be modular, fle

Sep 1, 2022

A collection of A-Frame components

A collection of A-Frame components

Fern A-Frame Components Collection This is a collection of A-Frame components. Check the individual components for their usages and corresponding exam

Dec 12, 2022
Owner
lijialiang
JavaScript Developer :)
lijialiang
:woman: Library for image processing

Lena.js Tiny library for image processing. Install via NPM npm install lena.js --save Install via yarn yarn add lena.js Run demo yarn demo Demo htt

Davidson Fellipe 558 Dec 28, 2022
Resize image in browser with high quality and high speed

pica - high quality image resize in browser Resize images in browser without pixelation and reasonably fast. Autoselect the best of available technolo

Nodeca 3.2k Dec 27, 2022
jQuery plugin that makes an image erasable (with mouse or touch movements)

jQuery.eraser v0.5.2 a jQuery plugin that makes an image erasable (with mouse or touch movements) This plugin replaces the targeted image by an intera

boblemarin 327 Oct 27, 2022
Nivo Slider - The Most Awesome jQuery Image Slider

Maintainer's Wanted! - Ineterested in contributing regularly to Nivo Slider development? Get in touch Nivo Slider The Nivo Slider is world renowned as

Verti Studio 1.2k Dec 24, 2022
Unite Gallery - Responsive jQuery Image and Video Gallery Plugin. Aim to be the best gallery on the web on it's kind. See demo here:

##Unite Gallery - Responsive jQuery Gallery Plugin Product Link: unitegallery.net This gallery has commercial versions for: WordPress , Joomla! , Pres

Max Valiano 531 Oct 24, 2022
🌅 Content-aware image resizer based on Seam Carving algorithm

Content-aware image resizing might be applied when it comes to changing the image proportions (i.e. reducing the width while keeping the height) and when losing some parts of the image is not desirable.

Oleksii Trekhleb 1.4k Dec 30, 2022
A light wight javascript image viewing plugin with smooth animation and 0 dependence

A light wight javascript image viewing plugin with smooth animation and 0 dependence

null 50 Nov 12, 2022
ASP.NET Core image gallery with Marten, ImageSharp, and HTMX

Image Gallery This sample uses the following core technologies to deliver an image gallery experience: ASP.NET Core Marten ImageSharp.Web HTMX This al

Khalid Abuhakmeh 11 Feb 9, 2022
An image post-processing code library

WebGPU image filter Preview online 这是一个用来展示 webgpu 在图片处理方面应用的 demo,但由于 webgpu API 还不稳定,本地都需要经常修改 API 才能跟上金丝雀的脚步,所以本项目的效果目前也还不稳定,目前仅供学习交流。

kuake 4 Mar 8, 2022
A very barebones editor that supports clicking on any pixel in a JPEG image to see the 64 DCT coefficients that make up that 8x8 block

JPEG Sandbox This is a very barebones editor that supports clicking on any pixel in a JPEG image to see the 64 DCT coefficients that make up that 8x8

Omar Shehata 383 Jan 2, 2023