Module: hcje/images

Functions and classes to facilitate the generation of random images which are then provided as data URLs for use in image elements. Each image is composed of a number of cells. This allows, for example, an image of multiple circles to be created without the need for any supporting media file.

Source:

Classes

ImageGenerator

Methods

(static) circleCellPainter(data)

Circle painter.

Parameters:
Name Type Description
data module:hcje/images~CellPainterData

Data describing the cell to paint.
Source:
See:

(static) imageCellPainter(data)

Painter for an image cell.

Parameters:
Name Type Description
data module:hcje/images~CellPainterData

Data describing the cell to be painted. Additional data describing the image are provided in the data.custom property.

Properties
Name Type Description
custom.image HTMLImageElement | SVGImageElement | ImageBitmap

Image to paint.
custom.keepAspect boolean

If true, maintain the image's aspect ratio.
Source:
See:

(static) pathCellPainter(data)

Path painter.

Parameters:
Name Type Description
data module:hcje/images~CellPainterData

Data describing the cell to paint. Additional data describing the path and fill are provided in the data.custom property.

Properties
Name Type Description
custom.points Array.<module:hcje/utils~Coordinate>

Array of coordinates describing the path.
custom.fill boolean

If true, the path is filled.
Source:
See:

(static) randomPathCellPainter(data)

Random path painter.

Parameters:
Name Type Description
data module:hcje/images~CellPainterData

Data describing the cell to paint.
Source:
See:

(static) textCellPainter(data)

Painter for a text cell.

Parameters:
Name Type Description
data module:hcje/images~CellPainterData

Data describing the cell to be painted. Additional data describing the text are provided in the data.custom property.

Properties
Name Type Attributes Description
custom.fontName string

Font name supplied as a CSS font name
custom.text string | Array.<string>

Text to paint.
custom.fitWidth boolean <optional>

If true, the text is fitted to the width of a cell. Normally it is fitted to the height of a cell.
Source:
See:

(static) triangleCellPainter(data)

Triangle painter.

Parameters:
Name Type Description
data module:hcje/images~CellPainterData

Data describing the cell to paint.
Source:
See:

Type Definitions

CellPainter()

Function responsible for painting a cell (rectangular area).

Source:

CellPainterData

Data provided to a cell painter function.

Type:
  • Object
Properties:
Name Type Description
imageSize module:hcje/utils~Dimensions

Dimensions of the image.
cell module:hcje/utils~RectData

Rectangle data for the cell.
custom Object

Additional painter specific data.
Source:

ImageConfig

Configuration data for an automatically generated image. The image is created from a 2 dimensional array of square cells arranged to fit within the image. To provide more variation, the size of each cell can be slightly randomised.

Type:
  • Object
Properties:
Name Type Attributes Description
imageSize module:hcje/utils~Dimensions

Dimensions of the image.
cellPainter CellPainter
cellConfig Object
Properties
Name Type Attributes Default Description
backgroundColor string <optional>
 'transparent'

CSS color of background
jitter number <optional>
 0

Proportion of the cell size by which a cell can be repositioned.
minScale number <optional>
 1

Minimum scale applied to cell size
maxScale number <optional>
 1

Maximum scale applied to cell size
palette Array.<string> <optional>
 ['black']

array of possibl CSS colors used for foreground colors
rowCount number <optional>
 1

Number of rows into which the image is divided. Cells are square, so the number of columns is automatically calculated.
strokeWidth number <optional>
 8

Stroke width
strokeWithinCell boolean <optional>
 false

If true, the cell size passed to painters is reduced so that strokes up to the border will fit within the original cell size.
custom Object <optional>

Additional information that might be required by a specific painter
Source: