拓冰网站定制 
Label Studio Image 标签完全指南图像标注界面的核心配置与源码解析【免费下载链接】label-studioLabel Studio is a multi-type data labeling and annotation tool with standardized output format项目地址: https://gitcode.com/GitHub_Trending/la/label-studioLabel Studio 使用 XML 风格的标签Tag来定义标注界面而Image是其中最重要的 Object 类标签之一用于在标注界面中展示图像是所有图像类标注任务目标检测、语义分割、关键点、图像分类等的基石。本文基于官方标签文档与仓库源码系统讲解Image标签的全部参数、配置示例、底层实现原理与多图标注场景帮助读者快速搭建可复用的图像标注界面。Image 标签是什么Image标签用于在标注页面上显示一张图片适用于图像类数据data type: images。无论是边界框、多边形、关键点还是图像分类任务都需要先用Image标签把图片渲染出来再配合对应的 Control 标签如RectangleLabels、Choices等完成标注。在 Label Studio 中标注界面标签分为三类见 标签介绍Object 标签用于展示任务数据如Image、Text、Audio、HyperTextControl 标签用于执行标注动作如Labels、Choices、TextAreaVisual 标签用于调整界面外观如View、Header、Style。所有 Object 与 Control 标签都要求name参数Control 标签还需要通过toName指向 Object 标签的name来建立关联。坐标存储的关键特性使用Image标签标注图像区域时标注结果区域坐标会以相对于图像原始尺寸的百分比0–100形式保存而不是像素绝对值。这一点在 标签文档 与源码注释中均有明确说明文档原文When you annotate image regions with this tag, the annotations are saved as percentages of the original size of the image, from 0-100.源码注释见 Image.js。这种设计使得标注结果不依赖具体图片分辨率同一批标注可以安全地在不同分辨率的图片之间复用也便于后续机器学习模型的训练与评估。完整参数说明Image标签支持以下参数其中带方括号[]的参数为可选参数参数类型默认值说明namestring—元素名称用于与 Control 标签的toName建立关联valuestring—数据字段名指向 JSON 或 CSV 中包含图片路径/URL 的字段[valueList]string—引用一个保存图片 URL 列表的变量实现多图标注示例见多页文档标注模板[smoothing]boolean—是否启用平滑处理默认遵循用户设置[width]string100%图片宽度[maxWidth]string750px图片最大宽度[zoom]booleanfalse是否启用鼠标滚轮缩放图片[negativeZoom]booleanfalse是否允许缩小图片缩放到 100% 以下[zoomBy]float1.1缩放比例因子[grid]booleanfalse是否显示网格[gridSize]number30网格大小[gridColor]string#EEEEF4网格颜色十六进制透明度为 0.15[zoomControl]booleanfalse是否在工具栏显示缩放控制[brightnessControl]booleanfalse是否在工具栏显示亮度控制[contrastControl]booleanfalse是否在工具栏显示对比度控制[rotateControl]booleanfalse是否在工具栏显示旋转控制[crosshair]booleanfalse是否显示十字准线光标[horizontalAlignment]left|center|rightleft图片水平对齐方式[verticalAlignment]top|center|bottomtop图片垂直对齐方式[defaultZoom]auto|original|fitfit图片在视口内的初始缩放方式保持宽高比[crossOrigin]none|anonymous|use-credentialsnone配置图片的跨域CORS行为与 DOMimg元素的 crossOrigin 属性 类似源码中的默认值说明对照源码实现 Image.js可以更精确地理解上述默认值。需要特别指出的是当前仓库源码中的部分默认值与文档表格存在差异实际运行行为以源码为准zoom源码默认为true文档表格标注为falsezoomcontrol源码默认为true文档表格标注为falsemaxwidth源码默认为100%文档表格标注为750px源码还额外定义了height默认null、maxheight默认calc(100vh - 194px)、showlabels、selectioncontrol默认true、lazyoff等未写入文档表格的属性。这些参数在源码中由 mobx-state-tree 的types.model定义其中枚举型参数如horizontalAlignment、verticalAlignment、defaultZoom、crossOrigin通过types.enumeration校验传入非法值会被视为无效配置。基础示例显示一张图片最简单的标注配置只需要展示图片本身View !-- 从 JSON 的 url 字段或 CSV 的 url 列中获取图片地址 -- Image nameimage value$url rotateControltrue zoomControltrue/Image /View该示例同时开启了旋转控制与缩放控制便于标注时调整图片视角。结合 Control 标签完成图像分类实际标注任务中Image通常与 Control 标签配合使用。仓库内置的 图像分类模板 演示了图片 选项分类的完整组合View Image nameimage value$image/ Choices namechoice toNameimage Choice valueAdult content/ Choice valueWeapons / Choice valueViolence / /Choices /View要点Choices的toNameimage必须与Image的nameimage一致二者才建立标注关联。多图标注valueList 用法valueList参数允许Image标签引用一个包含多张图片 URL 的数组字段从而在一张标注界面内翻页查看并标注多张图片。仓库内置的 多页文档标注模板 是典型示例View RectangleLabels namerectangles toNamepdf showInlinetrue Label valueTitle backgroundgreen / Label valueDate backgroundblue / Label valueAuthor backgroundgold/ Label valueOrganization backgroundpink/ Label valueAmount backgroundred/ /RectangleLabels Image valueList$pages namepdf/ /View对应的任务数据示例{ pages: [ https://htx-pub.s3.amazonaws.com/demo/images/demo_stock_purchase_agreement/0001.jpg, https://htx-pub.s3.amazonaws.com/demo/images/demo_stock_purchase_agreement/0002.jpg, https://htx-pub.s3.amazonaws.com/demo/images/demo_stock_purchase_agreement/0003.jpg ] }标签文档中的第二个示例同样演示了这一用法View !-- 从 JSON 的 images 字段获取图片 URL 列表 -- Image nameimage valueList$images rotateControltrue zoomControltrue/Image /View !-- { data: { images: [ https://images.unsplash.com/photo-1556740734-7f3a7d7f0f9c?ixlibrb-1.2.1ixideyJhcHBfaWQiOjEyMDd9autoformatfitcropw1950q80, https://images.unsplash.com/photo-1556740734-7f3a7d7f0f9c?ixlibrb-1.2.1ixideyJhcHBfaWQiOjEyMDd9autoformatfitcropw1950q80 ] } } --该能力适用于 PDF 扫描件分页标注、多视图物体标注、文档版面分析等场景。关于多页文档标注的更多细节可参考 multi-page-document-annotation 模板。多图模式的底层实现从源码可以进一步理解valueList的运行机制见 Image.js标签解析时会根据是否存在valuelist判定为多图模式multiImagegetter见 L195-L197createImageEntitiesL586-L618会把 URL 数组逐个封装为图片实体image entity并为每个实体分配序号index切换当前图片时setCurrentImage会触发preloadImagesL796-L814以IMAGE_PRELOAD_COUNT 3的数量预加载相邻图片保证翻页流畅创建标注区域后afterResultCreated会把当前图片序号写入 region 的item_indexL637-L643使标注结果能精确对应到具体图片页。因此多图标注结果不仅包含坐标还包含item_index字段用于标识图片页码。参数背后的实现原理缩放机制zoom / zoomBy / negativeZoom / defaultZoomImage的缩放由一组内部状态currentZoom、zoomScale、stageZoom协同完成。setZoomL828-L874会根据图片尺寸与容器尺寸的关系决定缩放策略图片小于容器时先放大舞台stage到图片实际尺寸再按比例放大图片图片大于容器时舞台被压缩到视口大小图片在此基础上继续缩放。zoomBy定义了滚轮或按钮单次缩放的比例因子默认1.1negativeZoomfalse时缩放不会低于 100%源码中handleZoom在zoomScale 1且禁止负缩放时会重置为 1见 L987-L993。defaultZoom提供三种初始视图模式fit图片适配视口完整可见调用sizeToFit见 L920-L927original按原始像素尺寸显示调用sizeToOriginal见 L929-L936auto自动模式调用sizeToAuto见 L938-L943。此外滚轮缩放还支持惯性平滑getInertialZoom见 L945-L967缩放倍率被限制在MIN_ZOOM 0.1到MAX_ZOOM 100之间且单次滚轮事件的缩放变化不超过 30%避免误触导致画面剧烈跳动。工具栏控制zoomControl / brightnessControl / contrastControl / rotateControl当对应控制开关开启后源码afterAttachL620-L635会向工具管理器注册对应工具zoomControl→ZoomPanTool缩放/平移brightnessControl→BrightnessTool亮度对应brightness滤镜contrastControl→ContrastTool对比度对应contrast滤镜rotateControl→RotateTool旋转默认每次旋转 90 度见rotate方法 L1058-L1090亮度与对比度最终以 CSSfilter的形式作用于图片imageTransformgetter见 L498-L532旋转则通过组合transform的rotate与translate实现旋转后标注坐标仍会换算回原始方向。网格辅助grid / gridSize / gridColorgridtrue时标注画布上会叠加网格gridSize控制网格间距默认 30gridColor指定网格颜色十六进制默认#EEEEF4叠加透明度为 0.15。网格常用于像素级标注任务如分割、点选辅助对齐。对齐与跨域horizontalAlignment / verticalAlignment / crossOriginhorizontalAlignment与verticalAlignment决定图片在容器内的停靠位置源码中通过alignmentOffsetgetterL465-L489计算偏移量crossOrigin控制图片加载的 CORS 行为源码imageCrossOrigingetterL307-L313会在值为none时实际使用anonymous以保证 canvas 渲染与后续导出不污染画布。若图片存储在其他域名且需要导出标注区域截图应正确配置该参数。常见配置建议针对不同任务推荐以下参数组合常规目标检测/分类Image nameimage value$image/即可满足大部分场景精细标注像素级开启gridtrue、zoomtrue、zoomControltrue配合negativeZoomfalse防止过度缩小文档/票据标注使用valueList$pages处理多页扫描件开启rotateControl修正歪斜的扫描图需导出标注截图的场景若图片来自跨域 CDN设置crossOriginanonymous。总结Image标签是 Label Studio 图像类标注任务的核心 Object 标签其参数体系覆盖了尺寸、缩放、网格、工具栏、对齐与跨域等标注界面所需的全部能力。理解文档参数表与 Image.js 源码实现之间的对应关系可以帮助你在配置标注界面时精准选择参数并理解标注结果以百分比坐标存储、多图模式通过item_index定位页码等底层机制。更多标签的用法可继续阅读 标签索引完整的图像任务模板可在 computer-vision 模板目录 中查阅。【免费下载链接】label-studioLabel Studio is a multi-type data labeling and annotation tool with standardized output format项目地址: https://gitcode.com/GitHub_Trending/la/label-studio创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Label Studio Image 标签完全指南：图像标注界面的核心配置与源码解析
Label Studio Image 标签完全指南图像标注界面的核心配置与源码解析【免费下载链接】label-studioLabel Studio is a multi-type data labeling and annotation tool with standardized output format项目地址: https://gitcode.com/GitHub_Trending/la/label-studioLabel Studio 使用 XML 风格的标签Tag来定义标注界面而Image是其中最重要的 Object 类标签之一用于在标注界面中展示图像是所有图像类标注任务目标检测、语义分割、关键点、图像分类等的基石。本文基于官方标签文档与仓库源码系统讲解Image标签的全部参数、配置示例、底层实现原理与多图标注场景帮助读者快速搭建可复用的图像标注界面。Image 标签是什么Image标签用于在标注页面上显示一张图片适用于图像类数据data type: images。无论是边界框、多边形、关键点还是图像分类任务都需要先用Image标签把图片渲染出来再配合对应的 Control 标签如RectangleLabels、Choices等完成标注。在 Label Studio 中标注界面标签分为三类见 标签介绍Object 标签用于展示任务数据如Image、Text、Audio、HyperTextControl 标签用于执行标注动作如Labels、Choices、TextAreaVisual 标签用于调整界面外观如View、Header、Style。所有 Object 与 Control 标签都要求name参数Control 标签还需要通过toName指向 Object 标签的name来建立关联。坐标存储的关键特性使用Image标签标注图像区域时标注结果区域坐标会以相对于图像原始尺寸的百分比0–100形式保存而不是像素绝对值。这一点在 标签文档 与源码注释中均有明确说明文档原文When you annotate image regions with this tag, the annotations are saved as percentages of the original size of the image, from 0-100.源码注释见 Image.js。这种设计使得标注结果不依赖具体图片分辨率同一批标注可以安全地在不同分辨率的图片之间复用也便于后续机器学习模型的训练与评估。完整参数说明Image标签支持以下参数其中带方括号[]的参数为可选参数参数类型默认值说明namestring—元素名称用于与 Control 标签的toName建立关联valuestring—数据字段名指向 JSON 或 CSV 中包含图片路径/URL 的字段[valueList]string—引用一个保存图片 URL 列表的变量实现多图标注示例见多页文档标注模板[smoothing]boolean—是否启用平滑处理默认遵循用户设置[width]string100%图片宽度[maxWidth]string750px图片最大宽度[zoom]booleanfalse是否启用鼠标滚轮缩放图片[negativeZoom]booleanfalse是否允许缩小图片缩放到 100% 以下[zoomBy]float1.1缩放比例因子[grid]booleanfalse是否显示网格[gridSize]number30网格大小[gridColor]string#EEEEF4网格颜色十六进制透明度为 0.15[zoomControl]booleanfalse是否在工具栏显示缩放控制[brightnessControl]booleanfalse是否在工具栏显示亮度控制[contrastControl]booleanfalse是否在工具栏显示对比度控制[rotateControl]booleanfalse是否在工具栏显示旋转控制[crosshair]booleanfalse是否显示十字准线光标[horizontalAlignment]left|center|rightleft图片水平对齐方式[verticalAlignment]top|center|bottomtop图片垂直对齐方式[defaultZoom]auto|original|fitfit图片在视口内的初始缩放方式保持宽高比[crossOrigin]none|anonymous|use-credentialsnone配置图片的跨域CORS行为与 DOMimg元素的 crossOrigin 属性 类似源码中的默认值说明对照源码实现 Image.js可以更精确地理解上述默认值。需要特别指出的是当前仓库源码中的部分默认值与文档表格存在差异实际运行行为以源码为准zoom源码默认为true文档表格标注为falsezoomcontrol源码默认为true文档表格标注为falsemaxwidth源码默认为100%文档表格标注为750px源码还额外定义了height默认null、maxheight默认calc(100vh - 194px)、showlabels、selectioncontrol默认true、lazyoff等未写入文档表格的属性。这些参数在源码中由 mobx-state-tree 的types.model定义其中枚举型参数如horizontalAlignment、verticalAlignment、defaultZoom、crossOrigin通过types.enumeration校验传入非法值会被视为无效配置。基础示例显示一张图片最简单的标注配置只需要展示图片本身View !-- 从 JSON 的 url 字段或 CSV 的 url 列中获取图片地址 -- Image nameimage value$url rotateControltrue zoomControltrue/Image /View该示例同时开启了旋转控制与缩放控制便于标注时调整图片视角。结合 Control 标签完成图像分类实际标注任务中Image通常与 Control 标签配合使用。仓库内置的 图像分类模板 演示了图片 选项分类的完整组合View Image nameimage value$image/ Choices namechoice toNameimage Choice valueAdult content/ Choice valueWeapons / Choice valueViolence / /Choices /View要点Choices的toNameimage必须与Image的nameimage一致二者才建立标注关联。多图标注valueList 用法valueList参数允许Image标签引用一个包含多张图片 URL 的数组字段从而在一张标注界面内翻页查看并标注多张图片。仓库内置的 多页文档标注模板 是典型示例View RectangleLabels namerectangles toNamepdf showInlinetrue Label valueTitle backgroundgreen / Label valueDate backgroundblue / Label valueAuthor backgroundgold/ Label valueOrganization backgroundpink/ Label valueAmount backgroundred/ /RectangleLabels Image valueList$pages namepdf/ /View对应的任务数据示例{ pages: [ https://htx-pub.s3.amazonaws.com/demo/images/demo_stock_purchase_agreement/0001.jpg, https://htx-pub.s3.amazonaws.com/demo/images/demo_stock_purchase_agreement/0002.jpg, https://htx-pub.s3.amazonaws.com/demo/images/demo_stock_purchase_agreement/0003.jpg ] }标签文档中的第二个示例同样演示了这一用法View !-- 从 JSON 的 images 字段获取图片 URL 列表 -- Image nameimage valueList$images rotateControltrue zoomControltrue/Image /View !-- { data: { images: [ https://images.unsplash.com/photo-1556740734-7f3a7d7f0f9c?ixlibrb-1.2.1ixideyJhcHBfaWQiOjEyMDd9autoformatfitcropw1950q80, https://images.unsplash.com/photo-1556740734-7f3a7d7f0f9c?ixlibrb-1.2.1ixideyJhcHBfaWQiOjEyMDd9autoformatfitcropw1950q80 ] } } --该能力适用于 PDF 扫描件分页标注、多视图物体标注、文档版面分析等场景。关于多页文档标注的更多细节可参考 multi-page-document-annotation 模板。多图模式的底层实现从源码可以进一步理解valueList的运行机制见 Image.js标签解析时会根据是否存在valuelist判定为多图模式multiImagegetter见 L195-L197createImageEntitiesL586-L618会把 URL 数组逐个封装为图片实体image entity并为每个实体分配序号index切换当前图片时setCurrentImage会触发preloadImagesL796-L814以IMAGE_PRELOAD_COUNT 3的数量预加载相邻图片保证翻页流畅创建标注区域后afterResultCreated会把当前图片序号写入 region 的item_indexL637-L643使标注结果能精确对应到具体图片页。因此多图标注结果不仅包含坐标还包含item_index字段用于标识图片页码。参数背后的实现原理缩放机制zoom / zoomBy / negativeZoom / defaultZoomImage的缩放由一组内部状态currentZoom、zoomScale、stageZoom协同完成。setZoomL828-L874会根据图片尺寸与容器尺寸的关系决定缩放策略图片小于容器时先放大舞台stage到图片实际尺寸再按比例放大图片图片大于容器时舞台被压缩到视口大小图片在此基础上继续缩放。zoomBy定义了滚轮或按钮单次缩放的比例因子默认1.1negativeZoomfalse时缩放不会低于 100%源码中handleZoom在zoomScale 1且禁止负缩放时会重置为 1见 L987-L993。defaultZoom提供三种初始视图模式fit图片适配视口完整可见调用sizeToFit见 L920-L927original按原始像素尺寸显示调用sizeToOriginal见 L929-L936auto自动模式调用sizeToAuto见 L938-L943。此外滚轮缩放还支持惯性平滑getInertialZoom见 L945-L967缩放倍率被限制在MIN_ZOOM 0.1到MAX_ZOOM 100之间且单次滚轮事件的缩放变化不超过 30%避免误触导致画面剧烈跳动。工具栏控制zoomControl / brightnessControl / contrastControl / rotateControl当对应控制开关开启后源码afterAttachL620-L635会向工具管理器注册对应工具zoomControl→ZoomPanTool缩放/平移brightnessControl→BrightnessTool亮度对应brightness滤镜contrastControl→ContrastTool对比度对应contrast滤镜rotateControl→RotateTool旋转默认每次旋转 90 度见rotate方法 L1058-L1090亮度与对比度最终以 CSSfilter的形式作用于图片imageTransformgetter见 L498-L532旋转则通过组合transform的rotate与translate实现旋转后标注坐标仍会换算回原始方向。网格辅助grid / gridSize / gridColorgridtrue时标注画布上会叠加网格gridSize控制网格间距默认 30gridColor指定网格颜色十六进制默认#EEEEF4叠加透明度为 0.15。网格常用于像素级标注任务如分割、点选辅助对齐。对齐与跨域horizontalAlignment / verticalAlignment / crossOriginhorizontalAlignment与verticalAlignment决定图片在容器内的停靠位置源码中通过alignmentOffsetgetterL465-L489计算偏移量crossOrigin控制图片加载的 CORS 行为源码imageCrossOrigingetterL307-L313会在值为none时实际使用anonymous以保证 canvas 渲染与后续导出不污染画布。若图片存储在其他域名且需要导出标注区域截图应正确配置该参数。常见配置建议针对不同任务推荐以下参数组合常规目标检测/分类Image nameimage value$image/即可满足大部分场景精细标注像素级开启gridtrue、zoomtrue、zoomControltrue配合negativeZoomfalse防止过度缩小文档/票据标注使用valueList$pages处理多页扫描件开启rotateControl修正歪斜的扫描图需导出标注截图的场景若图片来自跨域 CDN设置crossOriginanonymous。总结Image标签是 Label Studio 图像类标注任务的核心 Object 标签其参数体系覆盖了尺寸、缩放、网格、工具栏、对齐与跨域等标注界面所需的全部能力。理解文档参数表与 Image.js 源码实现之间的对应关系可以帮助你在配置标注界面时精准选择参数并理解标注结果以百分比坐标存储、多图模式通过item_index定位页码等底层机制。更多标签的用法可继续阅读 标签索引完整的图像任务模板可在 computer-vision 模板目录 中查阅。【免费下载链接】label-studioLabel Studio is a multi-type data labeling and annotation tool with standardized output format项目地址: https://gitcode.com/GitHub_Trending/la/label-studio创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考