图像
Image标签用于在页面上显示图像。适用于所有图像标注任务，可在标注界面展示图像。
适用于以下数据类型：图像。
当您使用此标签标注图像区域时，标注结果会以相对于原始图像尺寸的百分比形式保存，范围从0到100。
参数
| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| 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. |
示例
在标注界面上显示图像的标注配置
<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>示例
用于执行多图像分割的标注配置
<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",
]
}
} -->