class Graphics.Image

Represents an image.

Properties:

src

read-only, string, url of the image.

width

read-only, integer, width.

height

read-only, integer, height.

size

read-only, Size

packaging

read-only, string, "png","webp", etc.

constructor:

new Graphics.Image(width, height, painter(graphics) [,initColor]);

constructs new Image by rendering arbitrary drawing on the bitmap.

parameters:

• width, height - Length, dimensions of the image;
• painter - function(graphics), drawing function to produce its content.
• initColor - Color, initial color to initialize bitmap bits.

note

Physical pixel size of created image depends on current screen resolution. If you need an image of exact pixels size use ppx length units:

new Graphics.Image(10ppx, 10ppx, ... ); // or
new Graphics.Image(Length.ppx(x), Length.ppx(y), ... ); 

note

Resolution of the graphics in painter is set to 1 bitmap pixel.

new Graphics.Image(width, height, element [,initColor])

new Image by rendering a DOM element on the bitmap.

parameters:

• width, height - Length, dimensions of the image;
• element - Element to render;
• initColor - Color, initial color to initialize bitmap bits.

Methods:

update()

image.update(painter(graphics)[,initColor])

update the bitmap by drawing on the image's surface.

toBytes()

image.toBytes(packaging [,compression:int]) : ArrayBuffer

parameters:

• packaging - string, is one of "png","jpeg","webp","bgra".
• compression - integer, 0 ... 100, compression factor (for jpeg).

colorAt()

image.colorAt(x,y): Color | null

returns color of a pixel at x/y.

compose()

image.compose(src, op, [dstx,dsty[,srcx,srcy,srcw,srch]]): Image

compose this image with src image, parameters:

• src - image to compose with;
• op, string, composition method, is one of:
  • "src-over",
  • "dst-over",
  • "src-in",
  • "dst-in",
  • "src-out",
  • "dst-out",
  • "src-atop",
  • "dst-atop",
  • "xor",
  • "copy",
  • "multiply",
  • "screen",
  • "overlay",
  • "darken",
  • "lighten",
  • "difference",
  • "exclusion",
  • "hue",
  • "saturation",
  • "luminosity",
  • "color",
  • "soft-light",
  • "hard-light",
  • "color-burn",
  • "color-dodge"

Returns composed image.

Static methods:

fromBytes()

Graphics.Image.fromBytes( data: ArrayBuffer ) : Image

constructs image from bytes (PNG,JPEG, etc). Throws an error in case of failures

load()

async Graphics.Image.load( url: string | request : Request [, sync: bool = false] ) : Promise(Image) | Image | null

loads image from url.

note

• If sync is false it is an async function (returns promise) so it needs to be await'ed.
• If sync is true it is a sync operation - returns either Image instance or null.

note

this method allows to cancel load request, see Fetch.