Home / JavaScript / Image Processing

Plugin to support playback of animated GIF images in PixiJS.

PixiJS Animated GIF Plugin to support playback of animated GIF images in PixiJS. Unlike normal GIF playback in the browser, this plugins allows you to
Information
Category: JavaScript / Image Processing
Watchers: 4
Star: 7
Fork: 0
Last update: Nov 23, 2021
Resource links
https://pixijs.io/gif/docs/
https://github.com/pixijs/gif

PixiJS Animated GIF

Node.js CI

Plugin to support playback of animated GIF images in PixiJS. Unlike normal GIF playback in the browser, this plugins allows you to stop, loop, change speed, or go to a specific frame.

Usage

Install the loader for handle GIF images.

import { AnimatedGIFLoader } from '@pixi/gif';
import { Loader } from '@pixi/loaders';

Loader.registerPlugin(AnimatedGIFLoader);

Load an animated GIF image.

import { Application } from 'pixi.js';

const app = new Application();
app.loader.add('image', 'image.gif');
app.loader.load((loader, resources) => {
    const image = resources.image.animation;
    app.stage.addChild(image);
});
0 Open More issues
Closed

Fix clearRect coordinate mistake when reading GIF

In AnimatedGIF.ts

            patchCanvas.width = width;
            patchCanvas.height = height;
            patchContext.clearRect(0, 0, width, height);
            const patchData = patchContext.createImageData(width, height);

            patchData.data.set(patch);
            patchContext.putImageData(patchData, 0, 0);

            // draw image at (left, top, width, height)
            context.drawImage(patchCanvas, left, top);
            const imageData = context.getImageData(0, 0, canvas.width, canvas.height);

            if (disposalType === 2)
            {
                // but clear rect at (0, 0, width, height)
                context.clearRect(0, 0, width, height);
            }

When the image has transparent pixels, left and top are not always 0, which can cause clearRect range errors, and results in issue like #3

opened May 26, 2022 by maliut 10
Closed

when using Pixijs with transparent gif, the gif shows the old pixels (not cleaning previous)

when using Pixijs with transparent gif, the gif shows the old pixels (not cleaning previous). see issue:

image

image

attaching transparent gif to try as well:

giphy

thank you for a great project,

FYI using latest libs.

Sean.

opened Feb 27, 2022 by born2net 4
Closed

GIF is partially rendered for some GIFs

Getting the resource.animation and adding it to the canvas for some GIFs only renders a portion of the GIF. giphy (1)

This renders on the canvas as image

Analysing the GIF, the first frame has smaller dimensions than the overall GIF, which might be why image

opened Jun 1, 2022 by AnnieCSerato 2
Closed

Frame index out of the range

First of all, thanks for the plugin. really help me in my current project. I'm having this issue when following the steps shown in the documentation: image

I cannot figure out what's going on. Here is an example of the code: https://codesandbox.io/s/pjijs-gif-frnug

opened Feb 6, 2022 by AgustinLaValla 2
Closed

Fix transparent

null

opened Jul 1, 2022 by q1998763 1
Closed

fix: Losing graphic control extension for some frames

see: https://github.com/matt-way/gifuct-js/issues/30

opened Jun 29, 2022 by q1998763 1

Contents

    nwtgck 🎬 Attach progress bar to animated GIF
    producthunt Simple yet powerful image downloading, caching and GIF playback framework.
    liyong03 Async GIF image decoder and Image viewer supporting play GIF images. It just use very less memory.
    RustAudio rodio — A Rust audio playback library
    rustaudio rodio - Audio playback library
    maxhumber ✨ Better animated Matplotlib gifs
    pixijs The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.
    chamkank Animated backgrounds on Windows (GIF frames)
    Flipboard Performant animated GIF engine for iOS
    TerryZ v-playback - A Vue2 plugin to make video play easier.
    google Takes in a GIF, short video converts it to animated ASCII art
    ImageOptim GIF encoder based on libimagequant (pngquant). Squeezes maximum possible quality from the awful GIF format.
    faressoft 🦄 Record your terminal and generate animated gif images or share a web player
    bencbartlett Very simple-to-use framework for rendering 5-dimensional animations (x, y, z, time, some color value) as an animated gif. This requires ImageMagick to combine the frames, but you can still render them without having it installed and just combine them with some online gif maker.
    mortenjust Zero-click animated Gifs
    felipecsl Android ImageView that handles animated GIF images
    Sybio GifCreator is a PHP class that creates animated GIF from multiple images
    sassman Blazingly fast terminal recorder that generates animated gif images for the web written in rust.
    kaishin High-performance animated GIF support for iOS in Swift
    swiftgif A small UIImage extension with gif support
    nitin42 🔥 Create timeline and playback based animations in React
    Share this repo

    Related Repos


    Image Processing
    4
    Generate hexagonal profile pictures client-side using HTML5 canvas.
    nathanhleung Hexooor Generate hexagonal profile pictures client-side using HTML5 canvas. This is a Next.js project bootstrapped with create-next-app. Getting Start
     
    Image Processing
    450
    Lightweight, interactive planning tool that visualizes a series of tasks using an HTML can...
    bvaughn Planner Lightweight, interactive planning tool that visualizes a series of tasks using an HTML canvas. Try it yourself at plannerjs.dev Plans created
     
    Image Processing
    1
    Clone of the Fallout hacking mini-game, rendered into a browser canvas.
    goobemaster kodenkel-fo-hacking Clone of the Fallout hacking mini-game, rendered into a browser canvas. You can try it out at: https://www.kodenkel.com/games/fo-h
     
    Image Processing
    18
    Zoom-in Like a Boss, How? Layout-Preserving Zoomer weighing in 🪶
    nyngwang NeoZoom.lua DEMO like_a_boss_demo.mov Intro. Are you still using <C-W>o to maximize a window split and DESTROY THE OTHER ONES under the same tab 😵 ?
     
    Image Processing
    133
    A WebGPU engine.
    dmnsgn A WebGPU engine.
     
    Image Processing
    3
    A minimalistic lightweight semi-automatic PDF gallery with lightbox
    eyaler projector A minimalistic lightweight semi-automatic PDF gallery with lightbox By Eyal Gruss Demo: https://ml4des.com Instructions: Add PDFs to the por
     
    Image Processing
    3.4k
    Graph drawing library for JavaScript
    anvaka VivaGraph VivaGraphJS is designed to be extensible and to support different rendering engines and layout algorithms. Underlying algorithms have been b
     
    Image Processing
    2.8k
    An image effects library for JavaScript using WebGL
    evanw glfx.js Adjust photos in your browser in realtime with glfx.js, an image effects library powered by WebGL. It uses your graphics card for image effect
     
    Image Processing
    2.6k
    bLazy is a lightweight script for lazy loading and multi-serving images, iframes, videos a...
    dinbror #hey, be lazy bLazy is a lightweight script for lazy loading and multi-serving images, iframes, videos and more (less than 1.4KB minified and gzipped)
     
    Image Processing
    2.6k
    Pure React Carousel Component
    FormidableLabs nuka-carousel A Pure ReactJS Carousel Component Install To add nuka-carousel to your project run the following command in your project folder. $ yarn
     
    Image Processing
    2.2k
    Replicating and improving the lightbox module seen on Medium with fluid transitions.
    terrymun Fluidbox If you're using Fluidbox for production, use the latest stable release and not the edge release (latest commit). Replicating and improving th
     
    Image Processing
    5
    Display an image and update it when the file changes
    gelisam image-watcher Display an image and update it when the file changes. $ image-watcher --help Usage: image-watcher FILE Display an image and update it
     
    Image Processing
    4.9k
    [Unmaintained] Minify images seamlessly
    imagemin imagemin Minify images seamlessly Sindre Sorhus' open source work is supported by the community Special thanks to: All your environment variables, in
     
    Image Processing
    14
    Dither pattern sandbox with canvas
    simulacroix dithering makes a cool pixel grid using dithering! it's a browser page: https://simulacroix.github.io/dithering/ why i found a cool dither algorithm s
     
    Image Processing
    7
    A simple module to add effects to your pictures
    hadiazt effects-image.js 🎨 A nice and easy to use module to add effects to your images ⚡️ Available filters blur brightness circle fhisheye flip greyscale in