Home Original page

ImageScript Documentation Image

Class

Image

Image(width, height) → {Image}

Represents an image; provides utility functions

Constructor

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

Creates a new image with the given dimensions

Parameters:
Name Type Description
width number
height number

View Source ImageScript.js, line 25

Members

Methods

# 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 637

# 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 696

# 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 383

# 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 411

# 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 460

# 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 580

# 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 789

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 498

# 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 562

# 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 1016

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 1053

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 1066

Promise.<Uint8Array>

# 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 396

# 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 235

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 246

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 622

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

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

View Source ImageScript.js, line 95

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 663

# 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 592

# 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 607

# 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 370

# 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 823

# 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 907

# 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 679

# 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 351

# 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 258

# 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 225

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 216

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 1079

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 855

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

function

# 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 168

# 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 130

# 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 1159

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 1187

The rendered text

Promise.<Image>

# 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 118

# 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 107

# 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 180

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

Array.<number>