Class

Image

Image(width, height) → {Image}

Represents an image; provides utility functions

Constructor

# new Image(width, height) → {Image}

Parameters:
Name Type Description
width number
height number

View Source ImageScript.js, line 24

Image

Members

# static RESIZE_AUTO

Used for automatically preserving an images aspect ratio when resizing.

View Source ImageScript.js, line 340

# static RESIZE_NEAREST_NEIGHBOR

Use Nearest-neighbor resizing.

View Source ImageScript.js, line 332

# static SVG_MODE_HEIGHT

Scale the SVG to fit the given height. For use with Image.renderSVG

View Source ImageScript.js, line 1184

# static SVG_MODE_SCALE

Scale the SVG by the given amount. For use with Image.renderSVG

View Source ImageScript.js, line 1168

# static SVG_MODE_WIDTH

Scale the SVG to fit the given width. For use with Image.renderSVG

View Source ImageScript.js, line 1176

Uint8ClampedArray

# bitmap

The images RGBA pixel data

View Source ImageScript.js, line 54

# height

The images height

View Source ImageScript.js, line 77

# width

The images width

View Source ImageScript.js, line 69

Methods

# static colorToRGB(color) → {Array.<number>}

Converts a color value to an array of RGB values (ignoring the colors alpha)

Parameters:
Name Type Description
color number

The color value to convert

View Source ImageScript.js, line 224

The RGB values ([R, G, B])

Array.<number>

# static colorToRGBA(color) → {Array.<number>}

Converts a color value to an array of RGBA values

Parameters:
Name Type Description
color number

The color value to convert

View Source ImageScript.js, line 215

The RGBA values ([R, G, B, A])

Array.<number>

# async static decode(data) → {Promise.<Image>}

Decodes an image (PNG, JPEG or TIFF)

Parameters:
Name Type Description
data Buffer | Uint8Array

The binary data to decode

View Source ImageScript.js, line 1115

The decoded image

Promise.<Image>

# static gradient(colors) → {function}

Creates a multi-point gradient generator

Parameters:
Name Type Description
colors Object.<number, number>

The gradient points to use (e.g. {0: 0xff0000ff, 1: 0x00ff00ff})

View Source ImageScript.js, line 891

The gradient generator. The function argument is the position in the gradient (0..1).

function

# static hslaToColor(h, s, l, a) → {number}

Converts HSLA colors to RGBA colors

Parameters:
Name Type Description
h number

hue (0..1)

s number

saturation (0..1)

l number

lightness (0..1)

a number

opacity (0..1)

View Source ImageScript.js, line 129

color

number

# static hslToColor(h, s, l) → {number}

Converts HSL colors to RGBA colors (assuming an opacity of 255)

Parameters:
Name Type Description
h number

hue (0..1)

s number

saturation (0..1)

l number

lightness (0..1)

View Source ImageScript.js, line 167

color

number

# async static renderSVG(svg, size, mode) → {Promise.<Image>}

Creates a new image from the given SVG

Parameters:
Name Type Default Description
svg string

The SVG content

size number 1

The size to use

mode number

The SVG resizing mode to use (one of SVG_MODE_SCALE, SVG_MODE_WIDTH, SVG_MODE_HEIGHT)

View Source ImageScript.js, line 1195

The rendered SVG graphic

Promise.<Image>

# async static renderText(font, scale, text, coloropt, layoutopt) → {Promise.<Image>}

Creates a new image containing the rendered text.

Parameters:
Name Type Attributes Default Description
font Uint8Array

TrueType (ttf/ttc) or OpenType (otf) font buffer to use

scale number

Font size to use

text string

Text to render

color number <optional>
0xffffffff

Text color to use

layout TextLayout <optional>

The text layout to use

View Source ImageScript.js, line 1223

The rendered text

Promise.<Image>

# static rgbaToColor(r, g, b, a) → {number}

Converts RGBA components to an RGBA value

Parameters:
Name Type Description
r number

red (0..255)

g number

green (0..255)

b number

blue (0..255)

a number

alpha (0..255)

View Source ImageScript.js, line 106

RGBA value

number

# static rgbaToHSLA(r, g, b, a) → {Array.<number>}

Converts an RGBA value to an array of HSLA values

Parameters:
Name Type Description
r number

(0..255)

g number

(0..255)

b number

(0..255)

a number

(0..255)

View Source ImageScript.js, line 179

The HSLA values ([H, S, L, A])

Array.<number>

# static rgbToColor(r, g, b) → {number}

Converts RGB components to an RGBA value (assuming alpha = 255)

Parameters:
Name Type Description
r number

red (0..255)

g number

green (0..255)

b number

blue (0..255)

View Source ImageScript.js, line 117

RGBA value

number

# averageColor() → {number}

Gets the average color of the image

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)

View Source ImageScript.js, line 636

Image

# clone() → {Image}

Clones the current image

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

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

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

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

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

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)

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

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

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

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)

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)

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

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

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

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

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)

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

View Source ImageScript.js, line 792

# invert() → {Image}

Inverts the images colors

View Source ImageScript.js, line 742

Image

# invertHue() → {Image}

Inverts the images hue

View Source ImageScript.js, line 779

Image

# invertSaturation() → {Image}

Inverts the images saturation

View Source ImageScript.js, line 766

Image

# invertValue() → {Image}

Inverts the images value (lightness)

View Source ImageScript.js, line 753

Image

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

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

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)

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)

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)

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

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

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

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)

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

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

View Source ImageScript.js, line 257