GIF decoding and rendering with HTML5 canvas
The GIF
object constructed has the following attributes.
Click to toggle table
Attribute JSDoc annotation Description
width
number
the width of the image in pixels (logical screen size)
height
number
the height of the image in pixels (logical screen size)
totalTime
number
the total duration of the gif in milliseconds (all delays added together) - will be Infinity
if there is a frame with the user input delay flag set and no timeout
colorRes
number
the color depth/resolution in bits per color (in the original) [1-8 bits]
pixelAspectRatio
number
if non zero the pixel aspect ratio will be from 4:1 to 1:4 in 1/64th increments
sortFlag
boolean
if the colors in the global color table are ordered after decreasing importance
globalColorTable
[number,number,number][]
the global color table for the GIF
backgroundImage
ImageData
an image filled with the background color (can be used as a background before the first frame) - if the global color table is not available this is transparent black
frames
Frame[]
each frame of the GIF (decoded into single images) - type information further below
comments
[number,string][]
comments in the file and on with frame they where found
applicationExtensions
ApplicationExtension[]
all application extensions found - type information further below
Click to toggle table
Attribute JSDoc annotation Description
left
number
the position of the left edge of this frame, in pixels, within the gif (from the left edge)
top
number
the position of the top edge of this frame, in pixels, within the gif (from the top edge)
width
number
the width of this frame in pixels
height
number
the height of this frame in pixels
disposalMethod
DisposalMethod
the disposal method for this frame - type information further below
image
ImageData
this frames image data
plainTextData
PlainTextData|null
the text that will be displayed on screen with this frame (if not null) - type information further below
userInputDelayFlag
boolean
if set waits for user input before rendering the next frame (timeout after delay if that is non-zero)
delayTime
number
the delay of this frame in milliseconds
sortFlag
boolean
if the colors in the local color table are ordered after decreasing importance
localColorTable
[number,number,number][]
the local color table for this frame
reserved
number
_reserved for future use_ (from packed field in image descriptor block)
GCreserved
number
_reserved for future use_ (from packed field in graphics control extension block)
DisposalMethod
attributes (enum)
Click to toggle table
Name Internal value (number
) Description Action
Replace
0
unspecified replaces entire frame
Combine
1
do not dispose combine with previous frame
RestoreBackground
2
restore to background combine with background (first frame)
RestorePrevious
3
restore to previous restore to previous undisposed frame state then combine
UndefinedA
4
undefined fallback to Replace
UndefinedB
5
undefined fallback to Replace
UndefinedC
6
undefined fallback to Replace
UndefinedD
7
undefined fallback to Replace
Click to toggle table
Attribute JSDoc annotation Description
left
number
the position of the left edge of text grid (in pixels) within the GIF (from the left edge)
top
number
the position of the top edge of text grid (in pixels) within the GIF (from the top edge)
width
number
the width of the text grid (in pixels)
height
number
the height of the text grid (in pixels)
charWidth
number
the width (in pixels) of each cell (character) in text grid
charHeight
number
the height (in pixels) of each cell (character) in text grid
foregroundColor
number
the index into the global color table for the foreground color of the text
backgroundColor
number
the index into the global color table for the background color of the text
text
string
the text to render on screen
ApplicationExtension
attributes
Click to toggle table
Attribute JSDoc annotation Description
identifier
string
8 character string identifying the application
authenticationCode
string
3 bytes to authenticate the application identifier
data
Uint8Array
the (raw) data of this application extension
URL parameters can be in any order (starting with ?
after the URL then parameters in format PARAMETER=VALUE
with &
between each parameter )
Click to toggle table
Parameter
Possible values Description Default value
gifURL
HTML image source (URL) (encoded URI component) the GIF to decode and render this GIF from Wikipedia
alertErrors
0 or 1 Errors while decoding will open an alert pop-up 1
forceClearLastFrame
0 or 1 Forces to clear the screen after the last frame, regardless of what the GIF file says 1