API Docs for:
Show:

ImageBuffer Class

Defined in: index.js:44

An ImageBuffer is a simple array of pixels that make up an image. Int32Array is used for better performance if supported, otherwise simple 8-bit manipulation is used as a fallback.

To use this class; construct a new ImageBuffer with the specified dimensions, and modify its pixels with either setPixel/getPixel or setPixelAt/getPixelAt methods. Then, you can use the buffer.apply(imageData) to apply the changes to a shared ImageData object.

You can also cache the image for later use by calling createImage(). Note that this is an expensive operation which should be used wisely.

If you pass an ImageData object as the first parameter to the constructor, instead of width and height, any changes to the pixels array should be reflected immediately on the given ImageData object. In such a case, apply() has no effect.

Constructor

ImageBuffer

(
  • width
  • height
)

Defined in index.js:44

Parameters:

  • width Number

    the width of the image

  • height Number

    the height of the image

Methods

apply

(
  • imageData
)

Defined in index.js:197

Applies this buffer's pixels to an ImageData object. If the supplied ImageData is strictly equal to this buffer's ImageData, and we are modifying pixels directly, then this call does nothing.

You can provide another ImageBuffer object, which essentially copies this buffer's pixels to the specified ImageBuffer. If the specified ImageBuffer is "directly" modifying its own ImageData's pixels, then it should be updated immediately.

Parameters:

  • imageData ImageData | ImageBuffer

    the image data or ImageBuffer

createColor

(
  • r
  • g
  • b
  • a
)
Object static

Defined in index.js:518

A utility function to create a lightweight 'color' object with the default components. Any components that are not specified will default to zero.

This is useful when you want to use a shared color object for the getPixel and getPixelAt methods.

Parameters:

  • r Number

    the r color component (0 - 255)

  • g Number

    the g color component (0 - 255)

  • b Number

    the b color component (0 - 255)

  • a Number

    the a color component (0 - 255)

Returns:

Object:

the resulting color object, with r, g, b, a properties

createImage

(
  • context
)
Image

Defined in index.js:145

Creates a new Image object from this ImageBuffer. You can pass a context to re-use, otherwise this method will create a new canvas and get its 2d context. This method uses toDataURL to generate a new Image.

Note that this is not supported on older 2.x Android devices.

Parameters:

  • context CanvasRenderingContext

    the canvas 2D rendering context

Returns:

Image:

a new Image object with the data URI of your ImageBuffer

fromRGBA

(
  • rgba
  • out
)
Object static

Defined in index.js:482

A utility to convert an integer in 0xRRGGBBAA format to a color object. This does not rely on endianness.

Parameters:

  • rgba Number

    an RGBA hex

  • out Object

    the object to use, optional

Returns:

Object:

a color object

getPixel

(
  • pixels
  • index
  • out
)
Object

Defined in index.js:397

Gets the pixel at the given index of the ImageBuffer's "data" array, which might be a Int32Array (modern browsers) or CanvasPixelArray (fallback), depending on the context's capabilities. Also takes endianness into account.

The returned value is an object containing the color components as bytes (0-255) in r, g, b, a. If out is specified, it will use that instead to reduce object creation.

Parameters:

  • pixels Int32Array | CanvasPixelArray

    the pixels data from ImageBuffer

  • index Number

    the offset in the data to grab the color

  • out Number

    the color object with r, g, b, a properties, or null

Returns:

Object:

a color representing the pixel at that location

getPixelAt

(
  • x
  • y
  • out
)
Object

Defined in index.js:130

This is a utility function to get the color at the specified X and Y position (from top left). You can specify a color object to reduce allocations.

Parameters:

  • x Number

    the x position to modify

  • y Number

    the y position to modify

  • out Number

    the color object with r, g, b, a properties, or null

Returns:

Object:

a color representing the pixel at that location

multiply

(
  • inputBuffer
  • inputBuffer
  • r
  • g
  • b
  • a
)
static

Defined in index.js:288

This is a convenience method to multiply all of the pixels in inputBuffer with the specified (r, g, b, a) color, and place the result into outputBuffer. It's assumed that both buffers have the same size.

Parameters:

  • inputBuffer ImageBuffer

    the input image data

  • inputBuffer ImageBuffer

    the output image data

  • r Number

    the red byte, 0-255

  • g Number

    the green byte, 0-255

  • b Number

    the blue byte, 0-255

  • a Number

    the alpha byte, 0-255

packPixel

(
  • r
  • g
  • b
  • a
)
Number static

Defined in index.js:423

Packs the r, g, b, a components into a single integer, for use with Int32Array. If LITTLE_ENDIAN, then ABGR order is used. Otherwise, RGBA order is used.

Parameters:

  • r Number

    the red byte, 0-255

  • g Number

    the green byte, 0-255

  • b Number

    the blue byte, 0-255

  • a Number

    the alpha byte, 0-255

Returns:

Number:

the packed color

setPixel

(
  • pixels
  • index
  • r
  • g
  • b
  • a
)

Defined in index.js:274

Sets the pixel at the given index of the ImageBuffer's "data" array, which might be a Int32Array (modern browsers) or CanvasPixelArray (fallback), depending on the context's capabilities. Also takes endianness into account.

Parameters:

  • pixels Int32Array | CanvasPixelArray

    the pixels data from ImageBuffer

  • index Number

    the offset in the data to manipulate

  • r Number

    the red byte, 0-255

  • g Number

    the green byte, 0-255

  • b Number

    the blue byte, 0-255

  • a Number

    the alpha byte, 0-255

setPixelAt

(
  • x
  • y
  • r
  • g
  • b
  • a
)

Defined in index.js:113

This is a utility function to set the color at the specified X and Y position (from top left).

Parameters:

  • x Number

    the x position to modify

  • y Number

    the y position to modify

  • r Number

    the red byte, 0-255

  • g Number

    the green byte, 0-255

  • b Number

    the blue byte, 0-255

  • a Number

    the alpha byte, 0-255

toRGBA

(
  • r
  • g
  • b
  • a
)
Number static

Defined in index.js:502

A utility to convert RGBA components to a 32 bit integer in RRGGBBAA format.

Parameters:

  • r Number

    the r color component (0 - 255)

  • g Number

    the g color component (0 - 255)

  • b Number

    the b color component (0 - 255)

  • a Number

    the a color component (0 - 255)

Returns:

Number:

a RGBA-packed 32 bit integer

unpackPixel

(
  • rgba
  • out
)
Object static

Defined in index.js:437

Unpacks the r, g, b, a components into the specified color object, or a new object, for use with Int32Array. If LITTLE_ENDIAN, then ABGR order is used when unpacking, otherwise, RGBA order is used. The resulting color object has the r, g, b, a properties which are unrelated to endianness.

Note that the integer is assumed to be packed in the correct endianness. On little-endian the format is 0xAABBGGRR and on big-endian the format is 0xRRGGBBAA. If you want a endian-independent method, use fromRGBA(rgba) and toRGBA(r, g, b, a).

Parameters:

  • rgba Number

    the integer, packed in endian order by packPixel

  • out Number

    the color object with r, g, b, a properties, or null

Returns:

Object:

a color representing the pixel at that location

Attributes

LITTLE_ENDIAN

Boolean | Null final static readonly

Defined in index.js:259

Will be true if little endianness was detected, or false if big endian was detected. If we could not detect the endianness (e.g. typed arrays not available, spec not implemented correctly), then this value will be null.

SUPPORTS_32BIT

Boolean final static readonly

Defined in index.js:247

Will be true if this context supports 32bit pixel maipulation using array buffer views.