Image Item

Renders a raster image on the canvas. Supports filters, borders, corner radius, SVG masks, shadows, and cropping.

Creating an Image Item

const { addItem } = useStudio()

addItem('Image', {
  x: 0,
  y: 0,
  width: 600,
  height: 400,
  itemProps: {
    src: 'https://example.com/photo.jpg',
  },
})

Properties

All properties below are passed inside itemProps.

Source

Property	Type	Description
src	string	URL or data URI of the image. Required.
flipX	boolean	Flip the image horizontally.
flipY	boolean	Flip the image vertically.

Border

Property	Type	Description
borderColor	string	Border color (hex).
borderWidth	number	Border thickness in pixels.
cornerRadius	number	Corner radius in pixels.

Filters

Property	Type	Description
blur	number	Gaussian blur amount.
brightness	number	Brightness adjustment.
contrast	number	Contrast adjustment.
saturation	number	Color saturation.
temperature	number	Color temperature.
vibrance	number	Vibrance adjustment.
shadows	number	Shadow tone adjustment.
whites	number	Whites tone adjustment.
blacks	number	Blacks tone adjustment.

Shadow

Property	Type	Description
shadowEnabled	boolean	Enable or disable the shadow.
shadowColor	string	Shadow color.
shadowBlur	number	Shadow blur radius.
shadowOffsetX	number	Shadow horizontal offset.
shadowOffsetY	number	Shadow vertical offset.

Crop

Property	Type	Description
crop	{ x: number; y: number; width: number; height: number }	Crop region in pixels relative to the original image.

Mask

Property	Type	Description
svgMask	{ path: string; viewBox: { x: number; y: number; w: number; h: number }; filename: string }	SVG shape used as a clip mask.

Full Example

addItem('Image', {
  x: 50,
  y: 50,
  width: 500,
  height: 350,
  itemProps: {
    src: 'https://example.com/photo.jpg',
    cornerRadius: 16,
    borderColor: '#ffffff',
    borderWidth: 4,
    brightness: 0.1,
    contrast: 0.2,
    shadowEnabled: true,
    shadowColor: '#000000',
    shadowBlur: 20,
    shadowOffsetX: 0,
    shadowOffsetY: 8,
  },
})