Class

Frame

Frame(width, height, durationopt, xOffsetopt, yOffsetopt, disposalModeopt) → {Frame}

Represents a frame in a GIF

Constructor

# new Frame(width, height, durationopt, xOffsetopt, yOffsetopt, disposalModeopt) → {Frame}

Parameters:
Name Type Attributes Default Description
width number
height number
duration number <optional>
100

The frames duration (in ms)

xOffset number <optional>
0

The frames offset on the x-axis

yOffset number <optional>
0

The frames offset on the y-axis

disposalMode string | number <optional>
Frame.DISPOSAL_KEEP

The frame's disposal mode (Frame.DISPOSAL_KEEP, Frame.DISPOSAL_PREVIOUS or Frame.DISPOSAL_BACKGROUND)

View Source ImageScript.js, line 1260

Frame

Extends

Members

# static DISPOSAL_BACKGROUND

GIF frame disposal mode BACKGROUND. For use with Frame

View Source ImageScript.js, line 1281

# static DISPOSAL_KEEP

GIF frame disposal mode KEEP. For use with Frame

View Source ImageScript.js, line 1265

# static DISPOSAL_PREVIOUS

GIF frame disposal mode PREVIOUS. For use with Frame

View Source ImageScript.js, line 1273

Uint8ClampedArray

# bitmap

The images RGBA pixel data

Overrides:

View Source ImageScript.js, line 54

# height

The images height

Overrides:

View Source ImageScript.js, line 77

# width

The images width

Overrides:

View Source ImageScript.js, line 69

Methods

# static from(image, durationopt, xOffsetopt, yOffsetopt, disposalModeopt) → {Frame}

Converts an Image instance to a Frame, cloning it in the process

Parameters:
Name Type Attributes Default Description
image Image

The image to create the frame from

duration number <optional>
100

The frames duration (in ms)

xOffset number <optional>
0

The frames offset on the x-axis

yOffset number <optional>
0

The frames offset on the y-axis

disposalMode string | number <optional>
Frame.DISPOSAL_KEEP

The frames disposal mode (Frame.DISPOSAL_KEEP, Frame.DISPOSAL_PREVIOUS or Frame.DISPOSAL_BACKGROUND)

View Source ImageScript.js, line 1330

Frame

# averageColor() → {number}

Gets the average color of the image

Overrides:

View Source ImageScript.js, line 805

number

# blue(saturation, absolute) → {Image}

Sets the blue channels saturation

Parameters:
Name Type Default Description
saturation number

The saturation to apply (0..1)

absolute boolean false

Whether to scale the current saturation (false) or just set the new saturation (true)

Overrides:

View Source ImageScript.js, line 636

Image

# clone() → {Image}

Clones the current image

Overrides:

View Source ImageScript.js, line 322

Image

# composite(source, xopt, yopt) → {Image}

Composites (overlays) the source onto this image at the specified coordinates

Parameters:
Name Type Attributes Default Description
source Image

The image to place

x number <optional>
0

The x position to place the image at

y number <optional>
0

The y position to place the image at

Overrides:

View Source ImageScript.js, line 695

Image

# contain(width, height, modeopt) → {Image}

Resizes the image so it is contained in the given bounding box. Can return an image with one axis smaller than the given bounding box.

Parameters:
Name Type Attributes Default Description
width number

The width of the bounding box

height number

The height of the bounding box

mode string <optional>
Image.RESIZE_NEAREST_NEIGHBOR

The resizing mode to use

Overrides:

View Source ImageScript.js, line 382

The resized image

Image

# cover(width, height, modeopt) → {Image}

Resizes the image so it covers the given bounding box, cropping the overflowing edges. Always returns the exact dimensions of the bounding box.

Parameters:
Name Type Attributes Default Description
width number

The width of the bounding box

height number

The height of the bounding box

mode string <optional>
Image.RESIZE_NEAREST_NEIGHBOR

The resizing mode to use

Overrides:

View Source ImageScript.js, line 410

The resized image

Image

# crop(x, y, width, height) → {Image}

Crops an image to the specified dimensions

Parameters:
Name Type Description
x number

The x offset

y number

The y offset

width number

The new images width

height number

The new images height

Overrides:

View Source ImageScript.js, line 459

Image

# cropCircle(maxopt, featheringopt) → {Image}

Crops the image into a circle

Parameters:
Name Type Attributes Default Description
max boolean <optional>
false

Whether to use the larger dimension for the size

feathering number <optional>
0

How much feathering to apply to the edges

Overrides:

View Source ImageScript.js, line 579

Image

# dominantColor(ignoreBlackopt, ignoreWhiteopt, bwThresholdopt) → {number}

Gets the images dominant color

Parameters:
Name Type Attributes Default Description
ignoreBlack boolean <optional>
true

Whether to ignore dark colors below the threshold

ignoreWhite boolean <optional>
true

Whether to ignore light colors above the threshold

bwThreshold number <optional>
0xf

The black/white threshold (0-64)

Overrides:

View Source ImageScript.js, line 825

The images dominant color

number

# drawBox(x, y, width, height, color) → {Image}

Draws a box at the specified coordinates

Parameters:
Name Type Description
x number

The x offset

y number

The y offset

width number

The box width

height number

The box height

color number | colorFunction

The color to fill the box in with

Overrides:

View Source ImageScript.js, line 497

Image

# drawCircle(x, y, radius, color) → {Image}

Draws a circle at the specified coordinates with the specified radius

Parameters:
Name Type Description
x number

The center x position

y number

The center y position

radius number

The circles radius

color number | colorFunction
Overrides:

View Source ImageScript.js, line 561

Image

# async encode(compression, metaopt) → {Promise.<Uint8Array>}

Encodes the image into a PNG

Parameters:
Name Type Attributes Default Description
compression number 1

The compression level to use (0-9)

meta PNGMetadata <optional>
{}

Image metadata

Overrides:

View Source ImageScript.js, line 1052

The encoded data

Promise.<Uint8Array>

# async encodeJPEG(qualityopt) → {Promise.<Uint8Array>}

Encodes the image into a JPEG

Parameters:
Name Type Attributes Default Description
quality number <optional>
90

The JPEG quality to use (1-100)

Overrides:

View Source ImageScript.js, line 1089

Promise.<Uint8Array>

# async encodeWEBP(qualityopt) → {Promise.<Uint8Array>}

Encodes the image into a WEBP

Parameters:
Name Type Attributes Default Description
quality null | number <optional>
null

The WEBP quality to use (0-100) (null is lossless)

Overrides:

View Source ImageScript.js, line 1102

Promise.<Uint8Array>

# fill(color) → {Image}

Fills the image data with the supplied color

Parameters:
Name Type Description
color number | colorFunction
Overrides:

View Source ImageScript.js, line 312

Image

# fit(width, height, modeopt) → {Image}

Resizes the image so it is contained in the given bounding box, placing it in the center of the given bounding box. Always returns the exact dimensions of the bounding box.

Parameters:
Name Type Attributes Default Description
width number

The width of the bounding box

height number

The height of the bounding box

mode string <optional>
Image.RESIZE_NEAREST_NEIGHBOR

The resizing mode to use

Overrides:

View Source ImageScript.js, line 395

The resized image

Image

# getPixelAt(x, y) → {number}

Gets the pixel color at the specified position

Parameters:
Name Type Description
x number
y number
Overrides:

View Source ImageScript.js, line 234

The color value

number

# getRGBAAt(x, y) → {Uint8ClampedArray}

Gets the pixel color at the specified position

Parameters:
Name Type Description
x number
y number
Overrides:

View Source ImageScript.js, line 245

The RGBA value

Uint8ClampedArray

# green(saturation, absolute) → {Image}

Sets the green channels saturation

Parameters:
Name Type Default Description
saturation number

The saturation to apply (0..1)

absolute boolean false

Whether to scale the current saturation (false) or just set the new saturation (true)

Overrides:

View Source ImageScript.js, line 621

Image

# hueShift(degrees)

Shifts the images hue

Parameters:
Name Type Description
degrees number

How many degrees to shift the hue by

Overrides:

View Source ImageScript.js, line 792

# invert() → {Image}

Inverts the images colors

Overrides:

View Source ImageScript.js, line 742

Image

# invertHue() → {Image}

Inverts the images hue

Overrides:

View Source ImageScript.js, line 779

Image

# invertSaturation() → {Image}

Inverts the images saturation

Overrides:

View Source ImageScript.js, line 766

Image

# invertValue() → {Image}

Inverts the images value (lightness)

Overrides:

View Source ImageScript.js, line 753

Image

# generator iterateWithColors() → {Array.<number>}

Yields an [x, y, color] array for every pixel in the image

Overrides:

View Source ImageScript.js, line 94

The coordinates and color of the pixel ([x, y, color])
Array.<number>

# lightness(value, absolute) → {Image}

Sets the brightness of the image

Parameters:
Name Type Default Description
value number

The lightness to apply (0..1)

absolute boolean false

Whether to scale the current lightness (false) or just set the new lightness (true)

Overrides:

View Source ImageScript.js, line 662

Image

# opacity(opacity, absolute) → {Image}

Sets the images opacity

Parameters:
Name Type Default Description
opacity number

The opacity to apply (0..1)

absolute boolean false

Whether to scale the current opacity (false) or just set the new opacity (true)

Overrides:

View Source ImageScript.js, line 591

Image

# red(saturation, absolute) → {Image}

Sets the red channels saturation

Parameters:
Name Type Default Description
saturation number

The saturation to apply (0..1)

absolute boolean false

Whether to scale the current saturation (false) or just set the new saturation (true)

Overrides:

View Source ImageScript.js, line 606

Image

# resize(width, height, modeopt) → {Image}

Resizes the image to the given dimensions. Use Image.RESIZE_AUTO as either width or height to automatically preserve the aspect ratio.

Parameters:
Name Type Attributes Default Description
width number

The new width

height number

The new height

mode string <optional>
Image.RESIZE_NEAREST_NEIGHBOR

The resizing mode to use

Overrides:

View Source ImageScript.js, line 369

The resized image

Image

# rotate(angle, resize)

Rotates the image the given amount of degrees

Parameters:
Name Type Default Description
angle number

The angle to rotate the image for (in degrees)

resize boolean true

Whether to resize the image so it fits all pixels or just ignore outlying pixels

Overrides:

View Source ImageScript.js, line 859

# roundCorners(radiusopt) → {Image}

Rounds the images corners

Parameters:
Name Type Attributes Default Description
radius number <optional>
min(width,height)/4

The radius of the corners

Overrides:

View Source ImageScript.js, line 943

Image

# saturation(value, absolute) → {Image}

Sets the saturation of the image

Parameters:
Name Type Default Description
value number

The saturation to apply (0..1)

absolute boolean false

Whether to scale the current saturation (false) or just set the new saturation (true)

Overrides:

View Source ImageScript.js, line 678

Image

# scale(factor, modeopt) → {Image}

Resizes the image by the given factor

Parameters:
Name Type Attributes Default Description
factor number

The factor to resize the image with

mode string <optional>
Image.RESIZE_NEAREST_NEIGHBOR

The resizing mode to use

Overrides:

View Source ImageScript.js, line 350

Image

# setPixelAt(x, y, pixelColor)

Sets the pixel color for the specified position

Parameters:
Name Type Description
x number
y number
pixelColor number
Overrides:

View Source ImageScript.js, line 257