Giter VIP home page Giter VIP logo

gifiddle's Introduction

gifiddle

gifiddle is a GIF viewer based on JavaScript and HTML5 that runs entirely in a browser.

Now, you may think: "Who the hell would need that? GIFs are supported by browsers since the invention of the WWW!".

That's correct. But wait, there's more!

  • A video player interface for frame-precise playback control.
  • Detailed information and various rendering modes for analysis and optimization.
  • Correct delay handling for non-looping GIF animations.
  • Full support of all GIF89a features, including the long-forgotten plain text extension and the "wait for user input" flag, which allows some historical GIFs to be viewed correctly.

Examples

Mixed image/text GIFs (browsers display the images only):

Pure text GIFs (broken in browsers):

GIF87a animations:

Cinemagraph examples (activate "Render raw frames" to visualize the optimization):

Compatibility

Most modern browsers in their recent versions (as of 2015) should work. I tested gifiddle with Firefox 36, Chrome 41 and, with a few quirks, Internet Explorer 10. The app makes extensive use of HTML5 and JavaScript features, so don't expect it to run in old browsers.

Also note that gifiddle requires quite a lot of RAM for large GIFs, since every frame needs to be decoded and kept in memory.

Credits

The GIF reading code is mostly based on shachaf's jsgif, modified with a fast LZW implementation from deanm's omggif and a few extensions on my side.

gifiddle's People

Contributors

ata4 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

gifiddle's Issues

Doesn't support non-square pixel ratios

Gifs support non-square pixel aspect ratios. https://www.w3.org/Graphics/GIF/spec-gif89a.txt

See the Logical Screen Descriptor section:

18. Logical Screen Descriptor.

      a. Description.  The Logical Screen Descriptor contains the parameters
      necessary to define the area of the display device within which the
      images will be rendered.  The coordinates in this block are given with
      respect to the top-left corner of the virtual screen; they do not
      necessarily refer to absolute coordinates on the display device.  This
      implies that they could refer to window coordinates in a window-based
      environment or printer coordinates when a printer is used.

      This block is REQUIRED; exactly one Logical Screen Descriptor must be
      present per Data Stream.

      b. Required Version.  Not applicable. This block is not subject to a
      version number. This block must appear immediately after the Header.

      c. Syntax.

      7 6 5 4 3 2 1 0        Field Name                    Type
     +---------------+
  0  |               |       Logical Screen Width          Unsigned
     +-             -+
  1  |               |
     +---------------+
  2  |               |       Logical Screen Height         Unsigned
     +-             -+
  3  |               |
     +---------------+
  4  | |     | |     |       <Packed Fields>               See below
     +---------------+
  5  |               |       Background Color Index        Byte
     +---------------+
  6  |               |       Pixel Aspect Ratio            Byte
     +---------------+
            viii) Pixel Aspect Ratio - Factor used to compute an approximation
            of the aspect ratio of the pixel in the original image.  If the
            value of the field is not 0, this approximation of the aspect ratio
            is computed based on the formula:

            Aspect Ratio = (Pixel Aspect Ratio + 15) / 64

            The Pixel Aspect Ratio is defined to be the quotient of the pixel's
            width over its height.  The value range in this field allows
            specification of the widest pixel of 4:1 to the tallest pixel of
            1:4 in increments of 1/64th.

            Values :        0 -   No aspect ratio information is given.
                       1..255 -   Value used in the computation.

Most gifs nowadays have an aspect ratio of 0:0 which just means to use the host pixel size, but that isn't the case with all gifs.

See: http://frs.badcoffee.info/PAR_AcidTest/ for examples.

No modern browser supports this (16 year old bug from Mozilla here: https://bugzilla.mozilla.org/show_bug.cgi?id=333377) so it would be another cool feature to add.

Screen Shot 2022-01-03 at 1 08 00 PM

Note that it does seem to understand that the pixel aspect ratio is 2, it just won't render it.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.