canvas-heightmap

Canvas Heightmap is a package to get images data by pixels, channels or average in different representations that can be used to build heightmaps.

Quick Start

Install

npm install canvas-heightmap

Use

const ch = new CanvasHeightmap();

// At first set the source and wait until it would be loaded.
ch.use('https://raw.githubusercontent.com/loginov-rocks/canvas-heightmap/master/test/resources/black-and-white.png').
    then(() => {
      // Secondly invoke draw method to render image to be able to get its data.
      ch.draw();
      // Eventually you can get needed data.
      const flatArray = ch.getFlatArray();
      const rgbaArray = ch.getRgbaArray();
    });

API

CanvasHeightmap

Canvas Heightmap class.

Kind: global class

• CanvasHeightmap
  • new CanvasHeightmap()
  • use(source) ⇒ Promise.<HTMLImageElement|HTMLCanvasElement>
  • draw() ⇒ HTMLCanvasElement
  • getFlatArray([sx], [sy], [sw], [sh]) ⇒ Uint8ClampedArray
  • getFlatAverageArray([sx], [sy], [sw], [sh]) ⇒ Uint8ClampedArray
  • getFlatChannelArray(channel, [sx], [sy], [sw], [sh]) ⇒ Uint8ClampedArray
  • getFlatRgbaArray([sx], [sy], [sw], [sh]) ⇒ Array.<Uint8ClampedArray>
  • getAverageArray([sx], [sy], [sw], [sh]) ⇒ Array.<Uint8ClampedArray>
  • getChannelArray(channel, [sx], [sy], [sw], [sh]) ⇒ Array.<Uint8ClampedArray>
  • getRgbaArray([sx], [sy], [sw], [sh]) ⇒ Array.<Array.<Uint8ClampedArray>>

---

new CanvasHeightmap()

Canvas Heightmap constructor.

---

use(source) ⇒ Promise.<HTMLImageElement|HTMLCanvasElement>

Set canvas image source.

Kind: instance method of CanvasHeightmap

Parameter	Type
source	string | HTMLImageElement | HTMLCanvasElement

---

draw() ⇒ HTMLCanvasElement

Draw image source on canvas.

Kind: instance method of CanvasHeightmap

---

getFlatArray([sx], [sy], [sw], [sh]) ⇒ Uint8ClampedArray

Get one-dimensional array containing the data in the RGBA order, with integer values between 0 and 255 (included).

Kind: instance method of CanvasHeightmap

See:

• https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/getImageData
• https://developer.mozilla.org/en-US/docs/Web/API/ImageData/data

Parameter	Type	Default	Description
[sx]	number	0	The x coordinate of the upper left corner of the rectangle from which the data will be extracted.
[sy]	number	0	The y coordinate of the upper left corner of the rectangle from which the data will be extracted.
[sw]	number	this._width	The width of the rectangle from which the data will be extracted.
[sh]	number	this._height	The height of the rectangle from which the data will be extracted.

---

getFlatAverageArray([sx], [sy], [sw], [sh]) ⇒ Uint8ClampedArray

Get one-dimensional array containing the data by pixels with average over RGB channels, with integer values between 0 and 255 (included).

Kind: instance method of CanvasHeightmap

Parameter	Type	Default	Description
[sx]	number	0	The x coordinate of the upper left corner of the rectangle from which the data will be extracted.
[sy]	number	0	The y coordinate of the upper left corner of the rectangle from which the data will be extracted.
[sw]	number	this._width	The width of the rectangle from which the data will be extracted.
[sh]	number	this._height	The height of the rectangle from which the data will be extracted.

---

getFlatChannelArray(channel, [sx], [sy], [sw], [sh]) ⇒ Uint8ClampedArray

Get one-dimensional array containing the data for specified channel, with integer values between 0 and 255 (included).

Kind: instance method of CanvasHeightmap

Parameter	Type	Default	Description
channel	string		Channel: red, green, blue or alpha.
[sx]	number	0	The x coordinate of the upper left corner of the rectangle from which the data will be extracted.
[sy]	number	0	The y coordinate of the upper left corner of the rectangle from which the data will be extracted.
[sw]	number	this._width	The width of the rectangle from which the data will be extracted.
[sh]	number	this._height	The height of the rectangle from which the data will be extracted.

---

getFlatRgbaArray([sx], [sy], [sw], [sh]) ⇒ Array.<Uint8ClampedArray>

Get two-dimensional array containing the data by pixels and RGBA array for each, with integer values between 0 and 255 (included).

Kind: instance method of CanvasHeightmap

Parameter	Type	Default	Description
[sx]	number	0	The x coordinate of the upper left corner of the rectangle from which the data will be extracted.
[sy]	number	0	The y coordinate of the upper left corner of the rectangle from which the data will be extracted.
[sw]	number	this._width	The width of the rectangle from which the data will be extracted.
[sh]	number	this._height	The height of the rectangle from which the data will be extracted.

---

getAverageArray([sx], [sy], [sw], [sh]) ⇒ Array.<Uint8ClampedArray>

Get two-dimensional array containing the rows and cols data by pixels with average over RGB channels, with integer values between 0 and 255 (included).

Kind: instance method of CanvasHeightmap

Parameter	Type	Default	Description
[sx]	number	0	The x coordinate of the upper left corner of the rectangle from which the data will be extracted.
[sy]	number	0	The y coordinate of the upper left corner of the rectangle from which the data will be extracted.
[sw]	number	this._width	The width of the rectangle from which the data will be extracted.
[sh]	number	this._height	The height of the rectangle from which the data will be extracted.

---

getChannelArray(channel, [sx], [sy], [sw], [sh]) ⇒ Array.<Uint8ClampedArray>

Get two-dimensional array containing the rows and cols data for specified channel, with integer values between 0 and 255 (included).

Kind: instance method of CanvasHeightmap

Parameter	Type	Default	Description
channel	string		Channel: red, green, blue or alpha.
[sx]	number	0	The x coordinate of the upper left corner of the rectangle from which the data will be extracted.
[sy]	number	0	The y coordinate of the upper left corner of the rectangle from which the data will be extracted.
[sw]	number	this._width	The width of the rectangle from which the data will be extracted.
[sh]	number	this._height	The height of the rectangle from which the data will be extracted.

---

getRgbaArray([sx], [sy], [sw], [sh]) ⇒ Array.<Array.<Uint8ClampedArray>>

Get three-dimensional array containing the rows and cols data by pixels and RGBA array for each, with integer values between 0 and 255 (included).

Kind: instance method of CanvasHeightmap

Parameter	Type	Default	Description
[sx]	number	0	The x coordinate of the upper left corner of the rectangle from which the data will be extracted.
[sy]	number	0	The y coordinate of the upper left corner of the rectangle from which the data will be extracted.
[sw]	number	this._width	The width of the rectangle from which the data will be extracted.
[sh]	number	this._height	The height of the rectangle from which the data will be extracted.