Skip to main content

ImageBlock

new ImageBlock(image, options)

ImageBlock class is image shape inherted from ShapeBlock class. ImageBlock first property must be string of image path or html image element.

info

Keep in mind that because ImageBlock inherits from ShapeBlock, it can use some of the options of ShapeBlock. You can check shape block api for other options apply to ImageBlock.

Options​

clipX​

Clipping image from left of the image in x axis.

block.clipX(option)

Option

  • type : number | string | undefined
  • default: 0

Returns

  • clipX : number

clipY​

Clipping image from top of the image in y axis.

block.clipY(option)

Option

  • type : number | string | undefined
  • default: 0

Returns

  • clipY : number

clipWidth​

Clipping image width from right of the image in x axis.

block.clipWidth(option)

Option

  • type : number | string | undefined
  • default: width

Returns

  • clipWidth : number

clipHeight​

Clipping image height from bottom of the image in y axis.

block.clipHeight(option)

Option

  • type : number | string | undefined
  • default: height

Returns

  • clipHeight : number

objectFit​

Fitting image into block boundaries relative to width and height with "contain", "cover", "fill" options.

block.objectFit(option)

Option

  • type : "contain" | "cover" | "fill" | undefined
  • default: undefined

Returns

  • objectFit : string | undefined

repeatX​

Repeating image in x axis by given amount or relative fitting to width of ImageBlock.

block.repeatX(option)

Option

  • type : number | "fill" | undefined
  • default: undefined

Returns

  • repeatX : number | string | undefined

repeatY​

Repeating image in y axis by given amount or relative to fitting height of ImageBlock.

block.repeatY(option)

Option

  • type : number | "fill" | undefined
  • default: undefined

Returns

  • repeatY : number | string | undefined