This is the archived documentation for Doka Image Editor v6.
Please visit pqina.nl/pintura/docs/ to see documentation for the latest version of Pintura Image Editor.
Markup
The Doka Markup feature can be used to set pre-defined markup for the user to edit.
Use it for:
- Creating preset text fields or shapes the user can edit
- Automatically adding watermarks to images
- Automatically add borders to images
This feature integrates seamlessly with FilePond. The FilePond image preview and image transform plugins both can handle markup. Metadata set to FilePond file items is automatically passed to Doka for editing.
Available shapes
The following shapes can be defined in the markup property array.
The following properties are available to all shapes.
| Property | Default | Description |
|---|---|---|
| opacity | null |
The opacity of the shape, value between 0 and 1 |
| zIndex | 0 |
The z-index of the shape, higher values are moved to the top, lower values to the bottom. Use values lower than 0 to place shapes below user generated content. Shapes are rendered from top to bottom, so if no z-indexes are supplied, shapes at the end of the list will be rendered on top. |
| allowDestroy | true |
Can the user remove this shape? |
| allowSelect | true |
Can the user select this shape? |
| allowMove | true |
Can the user move this shape? |
| allowResize | true |
Can the user resize this shape? |
| allowInput | true |
Can the user input text in this shape? (only available for text input) |
| allowEdit | true |
Can the user edit the properties of this shape. Set to false to disable editing all properties. Set to array of editable properties to only allow those properties to be edited. |
The following properties are available to the allowEdit command:
fontFamilyfontSizefontWeighttextAlignbackgroundColorfontColorborderColorborderWidthborderStylelineColorlineWidthlineDecorationlineJoinlineCap
These positional properties are available to all shapes except the path shape. The path shape takes an array of points instead of a rect to describe its draw location.
Shape position and dimension values can be set to fractions 0 to 1, percentages '0%' to '100%', or pixel values '128px'
| Property | Default | Description |
|---|---|---|
| x | null |
The position from the left edge of the output image |
| y | null |
The position from the top edge of the output image |
| left | null |
Same as x |
| top | null |
Same as y |
| right | null |
The position from the right edge of the output image |
| bottom | null |
The position from bottom left edge of the output image |
Rect
| Property | Default | Description |
|---|---|---|
| width | null |
The width of the rectangle |
| height | null |
The height of the rectangle |
| backgroundColor | null |
The background color of the rectangle |
| borderColor | null |
The color of the rectangle stroke |
| borderWidth | null |
The width of the rectangle stroke |
| borderStyle | null |
A dash array to define a dashed line, ['10px'] a dash each 10 pixels |
Ellipse
| Property | Default | Description |
|---|---|---|
| width | null |
The width of the ellipse |
| height | null |
The height of the ellipse |
| backgroundColor | null |
The background color of the ellipse |
| borderColor | null |
The color of the ellipse stroke |
| borderWidth | null |
The width of the ellipse stroke |
| borderStyle | null |
A dash array to define a dashed line, ['10px'] a dash each 10 pixels |
Image
| Property | Default | Description |
|---|---|---|
| width | null |
The width of the image |
| height | null |
The height of the image |
| src | null |
The src of the image to show |
| fit | null |
How to render the image inside the image box, choose between 'contain', 'cover', or 'force' |
Text
| Property | Default | Description |
|---|---|---|
| fontColor | null |
The color of the font |
| fontWeight | null |
The weight of the font |
| fontFamily | null |
The font family of the font |
| textAlign | null |
The alignment of the font relative to the x position, 'left', 'center', or 'right' |
| text | null |
The text to render |
Line
| Property | Default | Description |
|---|---|---|
| width | null |
The width of the line box, drawn from top left to bottom right |
| height | null |
The height of the line box, drawn from top left to bottom right |
| lineWidth | null |
The width of the line to render |
| lineCap | null |
The line cap style |
| lineJoin | null |
The line join style |
| lineStyle | null |
A dash array to define a dashed line, ['10px'] a dash each 10 pixels |
| lineDecoration | null |
Array of line end styles |
Path
| Property | Default | Description |
|---|---|---|
| points | null |
Array of point objects [{ x:0, y:0 }, ...]. |
| lineWidth | null |
The width of the path to render |
| lineCap | null |
The path cap style |
| lineJoin | null |
The path join style |
| lineStyle | null |
A dash array to define a dashed path, ['10px'] a dash each 10 pixels |
Defining Markup
A markup item is defined using an array. The first index is the name of the shape, the second index contains the settings for the shape.
[
'rect',
{
x: 0,
y: 0,
width: '100px',
height: '100px',
backgroundColor: 'red',
},
];Defining multiple elements can be done like this, we've added canSelect: false to prevent the user from editing our watermark.
Doka.create({
markup: [
[
'rect',
{
left: 0,
right: 0,
bottom: 0,
height: '60px',
backgroundColor: 'rgba(0,0,0,.5)',
canSelect: false,
},
],
[
'image',
{
right: '10px',
bottom: '10px',
width: '128px',
height: '34px',
src: './doka-logo.svg',
fit: 'contain',
canSelect: false,
},
],
],
});