Class ImageLayer

Example

const { LazyCanvas, ImageLayer } = require('@hitomihiumi/lazy-canvas')

let image = new ImageLayer()
.setX(25)
.setY(25)
.setWidth(150)
.setHeight(150)
.setImage('https://i.pinimg.com/1200x/f3/32/19/f332192b2090f437ca9f49c1002287b6.jpg')

const lazy = new LazyCanvas()
.addLayers(image)
//...

Hierarchy (view full)

BaseLayer
- ImageLayer

Index

Constructors

constructor

new ImageLayer(data?): ImageLayer
Parameters
- Optionaldata: LazyCanvasLayer
Returns ImageLayer
Overrides BaseLayer.constructor
- Defined in structures/ImageLayer.ts:25

Properties

data

data: LazyCanvasLayer

Methods

setAlpha

setAlpha(alpha): ImageLayer
Parameters
- alpha: number
  The alpha value of the layer
Returns ImageLayer
Inherited from BaseLayer.setAlpha
- Defined in structures/BaseLayer.ts:171

setCentering

setCentering(centering): ImageLayer
Parameters
- centering: "legacy" | "new"
  The centering of the layer
Returns ImageLayer
- Defined in structures/ImageLayer.ts:78

setFilter

setFilter(filter): ImageLayer
Parameters
- filter: Filter
Returns ImageLayer
- Defined in structures/ImageLayer.ts:61

setGlobalCompositeOperation

setGlobalCompositeOperation(operation): ImageLayer
Parameters
- operation:
      | "color"
      | "source-over"
      | "source-in"
      | "source-out"
      | "source-atop"
      | "destination-over"
      | "destination-in"
      | "destination-out"
      | "destination-atop"
      | "lighter"
      | "copy"
      | "xor"
      | "multiply"
      | "screen"
      | "overlay"
      | "darken"
      | "lighten"
      | "color-dodge"
      | "color-burn"
      | "hard-light"
      | "soft-light"
      | "difference"
      | "exclusion"
      | "hue"
      | "saturation"
      | "luminosity"
  The global composite operation of the layer
Returns ImageLayer
Inherited from BaseLayer.setGlobalCompositeOperation
- Defined in structures/BaseLayer.ts:192

setHeight

setHeight(height): ImageLayer
Parameters
- height: number
  The height of the figure
Returns ImageLayer
- Defined in structures/ImageLayer.ts:54

setImage

setImage(image): ImageLayer
Parameters
- image: string | Uint8Array
  The image url or path
Returns ImageLayer
- Defined in structures/ImageLayer.ts:34

setOutline

setOutline(outline): ImageLayer
Parameters
- outline: Outline
  The outline of the figure
Returns ImageLayer
- Defined in structures/ImageLayer.ts:70

setRotation

setRotation(angle): ImageLayer
Parameters
- angle: number
  The angle of rotation the layer
Returns ImageLayer
Inherited from BaseLayer.setRotation
- Defined in structures/BaseLayer.ts:182

setShadowBlur

setShadowBlur(blur): ImageLayer
Parameters
- blur: number
  The degree of shadow blur
Returns ImageLayer
Inherited from BaseLayer.setShadowBlur
- Defined in structures/BaseLayer.ts:141

setShadowColor

setShadowColor(color): ImageLayer
Parameters
- color: string | Gradient | Pattern
  The shadow color for the layer
Returns ImageLayer
Inherited from BaseLayer.setShadowColor
- Defined in structures/BaseLayer.ts:131

setShadowOffsetX

setShadowOffsetX(offsetX): ImageLayer
Parameters
- offsetX: number
  The X-axis offset of the shadow relative to the layer
Returns ImageLayer
Inherited from BaseLayer.setShadowOffsetX
- Defined in structures/BaseLayer.ts:151

setShadowOffsetY

setShadowOffsetY(offsetY): ImageLayer
Parameters
- offsetY: number
  The Y-axis offset of the shadow relative to the layer
Returns ImageLayer
Inherited from BaseLayer.setShadowOffsetY
- Defined in structures/BaseLayer.ts:161

setWidth

setWidth(width): ImageLayer
Parameters
- width: number
  The width of the figure
Returns ImageLayer
- Defined in structures/ImageLayer.ts:44

setX

setX(x): ImageLayer
Parameters
- x: number
  The x position of the layer
Returns ImageLayer
Inherited from BaseLayer.setX
- Defined in structures/BaseLayer.ts:111

setY

setY(y): ImageLayer
Parameters
- y: number
  The y position of the layer
Returns ImageLayer
Inherited from BaseLayer.setY
- Defined in structures/BaseLayer.ts:121

toJSON

toJSON(): {
    align:
        | "left"
        | "center"
        | "right"
        | "start"
        | "end";
    alpha: number;
    angle: number;
    angles: number[];
    baseline:
        | "alphabetic"
        | "top"
        | "hanging"
        | "middle"
        | "ideographic"
        | "bottom";
    centering: "legacy" | "new";
    clockwise: boolean;
    color: string | Gradient | Pattern;
    controlPoint: {
        x: number;
        y: number;
    };
    controlPoints: {
        x: number;
        y: number;
    }[];
    direction: "ltr" | "rtl" | "inherit";
    fill: boolean;
    filter: Filter;
    font: string;
    globalComposite:
        | "color"
        | "source-over"
        | "source-in"
        | "source-out"
        | "source-atop"
        | "destination-over"
        | "destination-in"
        | "destination-out"
        | "destination-atop"
        | "lighter"
        | "copy"
        | "xor"
        | "multiply"
        | "screen"
        | "overlay"
        | "darken"
        | "lighten"
        | "color-dodge"
        | "color-burn"
        | "hard-light"
        | "soft-light"
        | "difference"
        | "exclusion"
        | "hue"
        | "saturation"
        | "luminosity";
    height: number;
    image: string | Uint8Array;
    lineDash: number[];
    multiline: boolean;
    outline: LazyCanvasOutline;
    points: {
        x: number;
        y: number;
    }[];
    radius: number;
    rotation: number;
    shadow: {
        shadowBlur: number;
        shadowColor: string | Gradient | Pattern;
        shadowOffsetX: number;
        shadowOffsetY: number;
    };
    sides: number;
    size: number;
    stroke: number;
    structureType: string;
    text: string;
    type: string;
    weight:
        | "normal"
        | "bold"
        | "italic"
        | "bold italic"
        | "regular"
        | "semi-bold"
        | "extra-bold"
        | "light"
        | "extra-light";
    width: number;
    x: number;
    y: number;
    toJSON(): LazyCanvasLayer;
}
Returns {
    align:
        | "left"
        | "center"
        | "right"
        | "start"
        | "end";
    alpha: number;
    angle: number;
    angles: number[];
    baseline:
        | "alphabetic"
        | "top"
        | "hanging"
        | "middle"
        | "ideographic"
        | "bottom";
    centering: "legacy" | "new";
    clockwise: boolean;
    color: string | Gradient | Pattern;
    controlPoint: {
        x: number;
        y: number;
    };
    controlPoints: {
        x: number;
        y: number;
    }[];
    direction: "ltr" | "rtl" | "inherit";
    fill: boolean;
    filter: Filter;
    font: string;
    globalComposite:
        | "color"
        | "source-over"
        | "source-in"
        | "source-out"
        | "source-atop"
        | "destination-over"
        | "destination-in"
        | "destination-out"
        | "destination-atop"
        | "lighter"
        | "copy"
        | "xor"
        | "multiply"
        | "screen"
        | "overlay"
        | "darken"
        | "lighten"
        | "color-dodge"
        | "color-burn"
        | "hard-light"
        | "soft-light"
        | "difference"
        | "exclusion"
        | "hue"
        | "saturation"
        | "luminosity";
    height: number;
    image: string | Uint8Array;
    lineDash: number[];
    multiline: boolean;
    outline: LazyCanvasOutline;
    points: {
        x: number;
        y: number;
    }[];
    radius: number;
    rotation: number;
    shadow: {
        shadowBlur: number;
        shadowColor: string | Gradient | Pattern;
        shadowOffsetX: number;
        shadowOffsetY: number;
    };
    sides: number;
    size: number;
    stroke: number;
    structureType: string;
    text: string;
    type: string;
    weight:
        | "normal"
        | "bold"
        | "italic"
        | "bold italic"
        | "regular"
        | "semi-bold"
        | "extra-bold"
        | "light"
        | "extra-light";
    width: number;
    x: number;
    y: number;
    toJSON(): LazyCanvasLayer;
}
- align:
      | "left"
      | "center"
      | "right"
      | "start"
      | "end"
- alpha: number
- angle: number
- angles: number[]
- baseline:
      | "alphabetic"
      | "top"
      | "hanging"
      | "middle"
      | "ideographic"
      | "bottom"
- centering: "legacy" | "new"
- clockwise: boolean
- color: string | Gradient | Pattern
- controlPoint: {
  x: number;
  y: number;
  }
  - x: number
  - y: number
- controlPoints: {
  x: number;
  y: number;
  }[]
- direction: "ltr" | "rtl" | "inherit"
- fill: boolean
- filter: Filter
- font: string
- globalComposite:
      | "color"
      | "source-over"
      | "source-in"
      | "source-out"
      | "source-atop"
      | "destination-over"
      | "destination-in"
      | "destination-out"
      | "destination-atop"
      | "lighter"
      | "copy"
      | "xor"
      | "multiply"
      | "screen"
      | "overlay"
      | "darken"
      | "lighten"
      | "color-dodge"
      | "color-burn"
      | "hard-light"
      | "soft-light"
      | "difference"
      | "exclusion"
      | "hue"
      | "saturation"
      | "luminosity"
- height: number
- image: string | Uint8Array
- lineDash: number[]
- multiline: boolean
- outline: LazyCanvasOutline
- points: {
  x: number;
  y: number;
  }[]
- radius: number
- rotation: number
- shadow: {
      shadowBlur: number;
      shadowColor: string | Gradient | Pattern;
      shadowOffsetX: number;
      shadowOffsetY: number;
  }
  - shadowBlur: number
  - shadowColor: string | Gradient | Pattern
  - shadowOffsetX: number
  - shadowOffsetY: number
- sides: number
- size: number
- stroke: number
- structureType: string
- text: string
- type: string
- weight:
      | "normal"
      | "bold"
      | "italic"
      | "bold italic"
      | "regular"
      | "semi-bold"
      | "extra-bold"
      | "light"
      | "extra-light"
- width: number
- x: number
- y: number
- toJSON:function
  - toJSON(): LazyCanvasLayer
  - Returns LazyCanvasLayer
    - Defined in types/LazyCanvasLayer.d.ts:17
Inherited from BaseLayer.toJSON
- Defined in structures/BaseLayer.ts:198

Class ImageLayer

Example

Hierarchy (view full)

Index

Constructors

Properties

Methods

Constructors

constructor

Parameters

Returns ImageLayer

Properties

data

Methods

setAlpha

Parameters

Returns ImageLayer

setCentering

Parameters

Returns ImageLayer

setFilter

Parameters

Returns ImageLayer

setGlobalCompositeOperation

Parameters

Returns ImageLayer

setHeight

Parameters

Returns ImageLayer

setImage

Parameters

Returns ImageLayer

setOutline

Parameters

Returns ImageLayer

setRotation

Parameters

Returns ImageLayer

setShadowBlur

Parameters

Returns ImageLayer

setShadowColor

Parameters

Returns ImageLayer

setShadowOffsetX

Parameters

Returns ImageLayer

setShadowOffsetY

Parameters

Returns ImageLayer

setWidth

Parameters

Returns ImageLayer

setX

Parameters

Returns ImageLayer

setY

Parameters

Returns ImageLayer

toJSON

align: | "left" | "center" | "right" | "start" | "end"

alpha: number

angle: number

angles: number[]

baseline: | "alphabetic" | "top" | "hanging" | "middle" | "ideographic" | "bottom"

centering: "legacy" | "new"

clockwise: boolean

color: string | Gradient | Pattern

controlPoint: { x: number; y: number; }

x: number

y: number

controlPoints: { x: number; y: number; }[]

direction: "ltr" | "rtl" | "inherit"

fill: boolean

filter: Filter

font: string

height: number

image: string | Uint8Array

lineDash: number[]

multiline: boolean

align:
| "left"
| "center"
| "right"
| "start"
| "end"

baseline:
| "alphabetic"
| "top"
| "hanging"
| "middle"
| "ideographic"
| "bottom"

controlPoint: {
x: number;
y: number;
}

controlPoints: {
x: number;
y: number;
}[]

points: {
x: number;
y: number;
}[]

shadow: {
shadowBlur: number;
shadowColor: string | Gradient | Pattern;
shadowOffsetX: number;
shadowOffsetY: number;
}

weight:
| "normal"
| "bold"
| "italic"
| "bold italic"
| "regular"
| "semi-bold"
| "extra-bold"
| "light"
| "extra-light"