Image
The Image tag shows an image on the page. Use for all image annotation tasks to display an image on the labeling interface.
Use with the following data types: images.
When you annotate image regions with this tag, the annotations are saved as percentages of the original size of the image, from 0-100.
Parameters
| Param | Type | Default | Description |
|---|---|---|---|
| name | string |
Name of the element | |
| value | string |
Data field containing a path or URL to the image | |
| [valueList] | string |
References a variable that holds a list of image URLs. For an example, see the Multi-Page Document Annotation template. | |
| [smoothing] | boolean |
Enable smoothing, by default it uses user settings | |
| [width] | string |
"100%" |
Image width |
| [maxWidth] | string |
"750px" |
Maximum image width |
| [zoom] | boolean |
false |
Enable zooming an image with the mouse wheel |
| [negativeZoom] | boolean |
false |
Enable zooming out an image |
| [zoomBy] | float |
1.1 |
Scale factor |
| [grid] | boolean |
false |
Whether to show a grid |
| [gridSize] | number |
30 |
Specify size of the grid |
| [gridColor] | string |
"#EEEEF4" |
Color of the grid in hex, opacity is 0.15 |
| [zoomControl] | boolean |
false |
Show zoom controls in toolbar |
| [brightnessControl] | boolean |
false |
Show brightness control in toolbar |
| [contrastControl] | boolean |
false |
Show contrast control in toolbar |
| [rotateControl] | boolean |
false |
Show rotate control in toolbar |
| [crosshair] | boolean |
false |
Show crosshair cursor |
| [horizontalAlignment] | left | center | right |
left |
Where to align image horizontally. Can be one of “left”, “center”, or “right” |
| [verticalAlignment] | top | center | bottom |
top |
Where to align image vertically. Can be one of “top”, “center”, or “bottom” |
| [defaultZoom] | auto | original | fit |
fit |
Specify the initial zoom of the image within the viewport while preserving its ratio. Can be one of “auto”, “original”, or “fit” |
| [crossOrigin] | none | anonymous | use-credentials |
none |
Configures CORS cross domain behavior for this image, either “none”, “anonymous”, or “use-credentials”, similar to DOM img crossOrigin property. |
Example
Labeling configuration to display an image on the labeling interface
<View>
<!-- Retrieve the image url from the url field in JSON or column in CSV -->
<Image name="image" value="$url" rotateControl="true" zoomControl="true"></Image>
</View>Example
Labeling configuration to perform multi-image segmentation
<View>
<!-- Retrieve the image url from the url field in JSON or column in CSV -->
<Image name="image" valueList="$images" rotateControl="true" zoomControl="true"></Image>
</View>
<!-- {
"data": {
"images": [
"https://images.unsplash.com/photo-1556740734-7f3a7d7f0f9c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80",
"https://images.unsplash.com/photo-1556740734-7f3a7d7f0f9c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80",
]
}
} -->