ImageBuffer Class
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
Parameters:
-
width
Numberthe width of the image
-
height
Numberthe height of the image
Item Index
Methods
- apply
- createColor static
- createImage
- fromRGBA static
- getPixel
- getPixelAt
- multiply static
- packPixel static
- setPixel
- setPixelAt
- toRGBA static
- unpackPixel static
Attributes
Methods
apply
-
imageData
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 | ImageBufferthe image data or ImageBuffer
createColor
-
r
-
g
-
b
-
a
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
Numberthe r color component (0 - 255)
-
g
Numberthe g color component (0 - 255)
-
b
Numberthe b color component (0 - 255)
-
a
Numberthe a color component (0 - 255)
Returns:
the resulting color object, with r, g, b, a properties
createImage
-
context
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
CanvasRenderingContextthe canvas 2D rendering context
Returns:
a new Image object with the data URI of your ImageBuffer
fromRGBA
-
rgba
-
out
A utility to convert an integer in 0xRRGGBBAA format to a color object. This does not rely on endianness.
Parameters:
-
rgba
Numberan RGBA hex
-
out
Objectthe object to use, optional
Returns:
a color object
getPixel
-
pixels
-
index
-
out
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 | CanvasPixelArraythe pixels data from ImageBuffer
-
index
Numberthe offset in the data to grab the color
-
out
Numberthe color object with
r, g, b, a
properties, or null
Returns:
a color representing the pixel at that location
getPixelAt
-
x
-
y
-
out
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
Numberthe x position to modify
-
y
Numberthe y position to modify
-
out
Numberthe color object with
r, g, b, a
properties, or null
Returns:
a color representing the pixel at that location
multiply
-
inputBuffer
-
inputBuffer
-
r
-
g
-
b
-
a
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
ImageBufferthe input image data
-
inputBuffer
ImageBufferthe output image data
-
r
Numberthe red byte, 0-255
-
g
Numberthe green byte, 0-255
-
b
Numberthe blue byte, 0-255
-
a
Numberthe alpha byte, 0-255
packPixel
-
r
-
g
-
b
-
a
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
Numberthe red byte, 0-255
-
g
Numberthe green byte, 0-255
-
b
Numberthe blue byte, 0-255
-
a
Numberthe alpha byte, 0-255
Returns:
the packed color
setPixel
-
pixels
-
index
-
r
-
g
-
b
-
a
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 | CanvasPixelArraythe pixels data from ImageBuffer
-
index
Numberthe offset in the data to manipulate
-
r
Numberthe red byte, 0-255
-
g
Numberthe green byte, 0-255
-
b
Numberthe blue byte, 0-255
-
a
Numberthe alpha byte, 0-255
setPixelAt
-
x
-
y
-
r
-
g
-
b
-
a
This is a utility function to set the color at the specified X and Y position (from top left).
Parameters:
-
x
Numberthe x position to modify
-
y
Numberthe y position to modify
-
r
Numberthe red byte, 0-255
-
g
Numberthe green byte, 0-255
-
b
Numberthe blue byte, 0-255
-
a
Numberthe alpha byte, 0-255
toRGBA
-
r
-
g
-
b
-
a
A utility to convert RGBA components to a 32 bit integer in RRGGBBAA format.
Parameters:
-
r
Numberthe r color component (0 - 255)
-
g
Numberthe g color component (0 - 255)
-
b
Numberthe b color component (0 - 255)
-
a
Numberthe a color component (0 - 255)
Returns:
a RGBA-packed 32 bit integer
unpackPixel
-
rgba
-
out
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
Numberthe integer, packed in endian order by packPixel
-
out
Numberthe color object with
r, g, b, a
properties, or null
Returns:
a color representing the pixel at that location