Design Format
ImageElement
Documentation for the ImageElement type in the Polotno design JSON Schema.
Type Information
Base Type: object
Properties
| Property | Type | Description |
|---|---|---|
id | string | Unique identifier for the element. |
type | "image" | No description provided |
name | string | Display name for the element. |
custom | unknown | Custom data attached to the element. |
x | number | X position in pixels. |
y | number | Y position in pixels. |
width | number | Width in pixels. |
height | number | Height in pixels. |
rotation | number | Rotation angle in degrees. |
opacity | number | Opacity level (0-1). |
animations | Array<Animation> | Animation configurations. |
blurEnabled | boolean | Whether blur effect is enabled. |
blurRadius | number | Blur radius in pixels. |
brightnessEnabled | boolean | Whether brightness effect is enabled. |
brightness | number | Brightness level (-1 to 1). |
sepiaEnabled | boolean | Whether sepia effect is enabled. |
grayscaleEnabled | boolean | Whether grayscale effect is enabled. |
filters | object | Applied image filters keyed by filter name. |
shadowEnabled | boolean | Whether shadow is enabled. |
shadowBlur | number | Shadow blur radius in pixels. |
shadowOffsetX | number | Shadow horizontal offset in pixels. |
shadowOffsetY | number | Shadow vertical offset in pixels. |
shadowColor | string | Shadow color. |
shadowOpacity | number | Shadow opacity (0-1). |
visible | boolean | Whether the element is visible. |
draggable | boolean | Whether the element can be dragged. |
resizable | boolean | Whether the element can be resized. |
selectable | boolean | Whether the element can be selected. |
removable | boolean | Whether the element can be removed. |
contentEditable | boolean | Whether the element content can be edited. |
styleEditable | boolean | Whether the element style can be edited. |
alwaysOnTop | boolean | Whether the element stays on top of others. |
showInExport | boolean | Whether the element appears in exports. |
src | string | URL or data URI of the image file. |
cropX | number | Crop X offset as a fraction (0-1). |
cropY | number | Crop Y offset as a fraction (0-1). |
cropWidth | number | Crop width as a fraction (0-1). |
cropHeight | number | Crop height as a fraction (0-1). |
cornerRadius | number | Corner radius in pixels. |
flipX | boolean | Whether the image is flipped horizontally. |
flipY | boolean | Whether the image is flipped vertically. |
clipSrc | string | URL or data URI for a clipping mask. |
borderColor | string | Border color. |
borderSize | number | Border width in pixels. |
keepRatio | boolean | Whether to maintain aspect ratio when resizing. |
stretchEnabled | boolean | Whether stretch mode is enabled. |
JSON Schema
{
"type": "object",
"properties": {
"id": {
"type": "string",
"description": "Unique identifier for the element."
},
"type": {
"type": "string",
"const": "image"
},
"name": {
"default": "",
"description": "Display name for the element.",
"type": "string"
},
"custom": {
"description": "Custom data attached to the element."
},
"x": {
"default": 0,
"description": "X position in pixels.",
"type": "number"
},
"y": {
"default": 0,
"description": "Y position in pixels.",
"type": "number"
},
"width": {
"default": 100,
"description": "Width in pixels.",
"type": "number"
},
"height": {
"default": 100,
"description": "Height in pixels.",
"type": "number"
},
"rotation": {
"default": 0,
"description": "Rotation angle in degrees.",
"type": "number"
},
"opacity": {
"default": 1,
"description": "Opacity level (0-1).",
"type": "number"
},
"animations": {
"default": [],
"description": "Animation configurations.",
"type": "array",
"items": {
"type": "object",
"properties": {
"delay": {
"default": 0,
"description": "Delay before the animation starts, in milliseconds.",
"type": "number"
},
"duration": {
"default": 500,
"description": "Animation duration in milliseconds.",
"type": "number"
},
"enabled": {
"default": true,
"description": "Whether the animation is enabled.",
"type": "boolean"
},
"type": {
"type": "string",
"enum": [
"enter",
"exit",
"loop"
],
"description": "Animation phase."
},
"name": {
"default": "none",
"description": "Animation name identifier.",
"type": "string"
},
"data": {
"default": {},
"description": "Animation-specific data."
}
},
"required": [
"type"
]
}
},
"blurEnabled": {
"default": false,
"description": "Whether blur effect is enabled.",
"type": "boolean"
},
"blurRadius": {
"default": 10,
"description": "Blur radius in pixels.",
"type": "number"
},
"brightnessEnabled": {
"default": false,
"description": "Whether brightness effect is enabled.",
"type": "boolean"
},
"brightness": {
"default": 0,
"description": "Brightness level (-1 to 1).",
"type": "number"
},
"sepiaEnabled": {
"default": false,
"description": "Whether sepia effect is enabled.",
"type": "boolean"
},
"grayscaleEnabled": {
"default": false,
"description": "Whether grayscale effect is enabled.",
"type": "boolean"
},
"filters": {
"default": {},
"type": "object",
"propertyNames": {
"type": "string"
},
"additionalProperties": {
"type": "object",
"properties": {
"intensity": {
"default": 1,
"description": "Filter intensity (-1 to 1).",
"type": "number"
}
}
},
"description": "Applied image filters keyed by filter name."
},
"shadowEnabled": {
"default": false,
"description": "Whether shadow is enabled.",
"type": "boolean"
},
"shadowBlur": {
"default": 5,
"description": "Shadow blur radius in pixels.",
"type": "number"
},
"shadowOffsetX": {
"default": 0,
"description": "Shadow horizontal offset in pixels.",
"type": "number"
},
"shadowOffsetY": {
"default": 0,
"description": "Shadow vertical offset in pixels.",
"type": "number"
},
"shadowColor": {
"default": "black",
"description": "Shadow color.",
"type": "string"
},
"shadowOpacity": {
"default": 1,
"description": "Shadow opacity (0-1).",
"type": "number"
},
"visible": {
"default": true,
"description": "Whether the element is visible.",
"type": "boolean"
},
"draggable": {
"default": true,
"description": "Whether the element can be dragged.",
"type": "boolean"
},
"resizable": {
"default": true,
"description": "Whether the element can be resized.",
"type": "boolean"
},
"selectable": {
"default": true,
"description": "Whether the element can be selected.",
"type": "boolean"
},
"removable": {
"default": true,
"description": "Whether the element can be removed.",
"type": "boolean"
},
"contentEditable": {
"default": true,
"description": "Whether the element content can be edited.",
"type": "boolean"
},
"styleEditable": {
"default": true,
"description": "Whether the element style can be edited.",
"type": "boolean"
},
"alwaysOnTop": {
"default": false,
"description": "Whether the element stays on top of others.",
"type": "boolean"
},
"showInExport": {
"default": true,
"description": "Whether the element appears in exports.",
"type": "boolean"
},
"src": {
"default": "",
"description": "URL or data URI of the image file.",
"type": "string"
},
"cropX": {
"default": 0,
"description": "Crop X offset as a fraction (0-1).",
"type": "number"
},
"cropY": {
"default": 0,
"description": "Crop Y offset as a fraction (0-1).",
"type": "number"
},
"cropWidth": {
"default": 1,
"description": "Crop width as a fraction (0-1).",
"type": "number"
},
"cropHeight": {
"default": 1,
"description": "Crop height as a fraction (0-1).",
"type": "number"
},
"cornerRadius": {
"default": 0,
"description": "Corner radius in pixels.",
"type": "number"
},
"flipX": {
"default": false,
"description": "Whether the image is flipped horizontally.",
"type": "boolean"
},
"flipY": {
"default": false,
"description": "Whether the image is flipped vertically.",
"type": "boolean"
},
"clipSrc": {
"default": "",
"description": "URL or data URI for a clipping mask.",
"type": "string"
},
"borderColor": {
"default": "black",
"description": "Border color.",
"type": "string"
},
"borderSize": {
"default": 0,
"description": "Border width in pixels.",
"type": "number"
},
"keepRatio": {
"default": false,
"description": "Whether to maintain aspect ratio when resizing.",
"type": "boolean"
},
"stretchEnabled": {
"default": false,
"description": "Whether stretch mode is enabled.",
"type": "boolean"
}
},
"required": [
"id",
"type"
]
}