Skip to main content

Image Block

Image blocks both combine canvas drawImage() method and css objectFit property features.

Image blocks accepts as first parameter, string path of the image file as well as URL as in the html image src attribute.

// Or you can just pass https://somesource/image.jpg
new ImageBlock("../image.png", {width: 120, height: 60})

Clipping​

Images can be cliped from top left to bottom right with clipX, clipY, clipWidth, and clipHeight options.

new ImageBlock("../image.png", {...options, clipX: 30, clipWidth: 50, clipY: 20, clipHeight: 40})

Object Fit​

Image blocks objectFit option apply same features as in the css objectFit property. ObjectFit comes in contain, cover, and fill parameters. In contain parameter image will be adjusted to respect of aspect ratio of width and height, cover will take image original size, and fill going to fit to the size of image block.

new ImageBlock("../image.png", {...options, objectFit: "contain" || "cover" || "fill"})

Repeat​

Images can be repeated inside of the image block for filling block's width or height, or you can just give how much repeat you like on both x and y axis.

new ImageBlock("../image.png", {...options, repeatX: "fill", repeatY: 2})