一种基于Canvas的多模式工业图像在线标注方法与流程

本发明属于计算机视觉与图像处理，具体涉及一种基于canvas的多模式工业图像在线标注方法。

背景技术：

1、在工业视觉检测系统的开发过程中，图像标注是训练深度学习目标检测和分割模型的关键前置环节。现有的工业图像标注方案主要存在以下三种类型及其对应的缺陷：

2、方案a（独立桌面标注工具，如labelimg）：此类方案为独立的桌面应用程序，用户需在本地计算机上完成安装、配置依赖环境和启动程序等操作，部署流程复杂。该类工具生成的标注数据格式与web端视觉检测系统的数据接口需要额外的格式转换和适配工作，难以与基于web架构的视觉检测系统实现无缝集成。

3、方案b（单一标注类型组件）：此类方案仅支持矩形框（bbox）一种标注类型，当需要对工业图像进行多边形区域标注、关键点标注或折线标注时，用户必须切换至不同的独立标注工具。在需要在一个图像上同时使用多种标注类型的场景中，操作流程割裂，标注效率低下。

4、方案c（纯坐标存储无缩放支持）：此类方案在图像标注过程中直接使用鼠标事件产生的dom坐标存储标注数据。当canvas画布因浏览器窗口缩放、图像缩放或设备像素比差异导致显示尺寸与canvas实际分辨率不一致时，标注坐标与原始图像分辨率之间产生映射偏移，标注位置偏离实际目标。

技术实现思路

1、本发明要解决的技术问题是：现有工业图像标注方案中，多类型标注模式需要切换独立工具导致操作流程割裂，且标注坐标仅针对当前显示尺寸存储而不支持缩放映射的技术问题。

2、为解决上述技术问题，本发明采用的技术方案如下：在web页面中创建canvas画布并在所述canvas画布上加载待标注的工业图像；根据接收到的模式切换指令确定当前标注模式，所述当前标注模式为bbox矩形框模式、polygon多边形模式、keypoint关键点模式和line折线模式中的一种；在所述canvas画布上监听鼠标事件和键盘事件，根据所述当前标注模式的交互逻辑生成对应的标注对象：在bbox矩形框模式下，通过鼠标按下事件记录起始坐标，在鼠标拖拽过程中实时更新矩形框大小，在鼠标释放事件中判断矩形框的宽度和高度均大于预设像素阈值时生成包含左上角坐标和右下角坐标的矩形框标注对象；在polygon多边形模式下，通过逐次鼠标点击事件添加各顶点坐标并实时绘制各顶点之间的连续虚线路径，在enter键按下且顶点数量大于或等于3时生成包含顶点坐标集合的多边形标注对象；在keypoint关键点模式下，通过鼠标点击事件在点击位置生成包含单个坐标点的关键点标注对象；在line折线模式下，通过逐次鼠标点击事件添加各顶点坐标，在enter键按下且顶点数量大于或等于2时生成包含顶点坐标集合的折线标注对象；通过所述canvas画布元素上的边界矩形获取方法获取所述canvas画布在浏览器中渲染的dom显示尺寸与所述canvas画布的实际分辨率，计算所述dom显示尺寸与所述实际分辨率之间的缩放比例，将鼠标事件产生的dom坐标根据所述缩放比例映射为canvas内部坐标，使得标注对象的坐标数据基于所述工业图像的原始分辨率存储；将生成的标注对象存入标注数据数组，每一标注对象包含类型标识、标签名称、坐标点集合和唯一标识，通过所述标注数据数组驱动侧边栏列表的渲染更新。

3、本发明还提供一种基于canvas的多模式工业图像在线标注系统，以及包含该系统的终端设备和存储实现上述方法的计算机程序的计算机可读存储介质。

4、本发明的有益效果在于：第一，四种工业图像标注模式在单一canvas渲染引擎下统一实现，模式切换指令仅改变交互逻辑的调度方式，无需卸载或重载canvas组件，也无需切换至不同的外部标注工具，消除了多类型标注场景下操作流程割裂的问题。第二，通过getboundingclientrect方法动态获取canvas画布的dom显示尺寸与实际分辨率之间的比例关系，在鼠标事件发生时实时计算缩放映射，使得标注坐标始终基于工业图像的原始分辨率存储，不受canvas画布缩放、窗口缩放或设备像素比差异的影响，标注位置在不同显示环境下保持稳定。第三，拖拽式交互（bbox模式）与点击式交互（polygon模式、keypoint模式、line模式）在同一个事件调度框架中统一管理，为每种模式定义了独立的鼠标事件处理逻辑和键盘事件处理逻辑，交互模式切换无需重新绑定事件监听器。

1.一种基于canvas的多模式工业图像在线标注方法，其特征在于，包括：在web页面中创建canvas画布并在所述canvas画布上加载待标注的工业图像；根据接收到的模式切换指令确定当前标注模式，所述当前标注模式为bbox矩形框模式、polygon多边形模式、keypoint关键点模式和line折线模式中的一种；在所述canvas画布上监听鼠标事件和键盘事件，根据所述当前标注模式的交互逻辑生成对应的标注对象：在bbox矩形框模式下，通过鼠标按下事件记录起始坐标，在鼠标拖拽过程中实时更新矩形框大小，在鼠标释放事件中判断矩形框的宽度和高度均大于预设像素阈值时生成包含左上角坐标和右下角坐标的矩形框标注对象；在polygon多边形模式下，通过逐次鼠标点击事件添加各顶点坐标并实时绘制各顶点之间的连续虚线路径，在enter键按下且顶点数量大于或等于3时生成包含顶点坐标集合的多边形标注对象；在keypoint关键点模式下，通过鼠标点击事件在点击位置生成包含单个坐标点的关键点标注对象；在line折线模式下，通过逐次鼠标点击事件添加各顶点坐标，在enter键按下且顶点数量大于或等于2时生成包含顶点坐标集合的折线标注对象；通过所述canvas画布元素上的边界矩形获取方法获取所述canvas画布在浏览器中渲染的dom显示尺寸与所述canvas画布的实际分辨率，计算所述dom显示尺寸与所述实际分辨率之间的缩放比例，将鼠标事件产生的dom坐标根据所述缩放比例映射为canvas内部坐标，使得标注对象的坐标数据基于所述工业图像的原始分辨率存储；将生成的标注对象存入标注数据数组，每一标注对象包含类型标识、标签名称、坐标点集合和唯一标识，通过所述标注数据数组驱动侧边栏列表的渲染更新。所述方法由终端设备处理器执行。

2.根据权利要求1所述的方法，其特征在于，在bbox矩形框模式下，所述预设像素阈值为5像素，当鼠标释放时矩形框的宽度小于或等于5像素或高度小于或等于5像素时，放弃生成所述矩形框标注对象。

3.如权利要求1所述的方法，其特征在于，在polygon多边形模式下，进一步监听escape键事件，当escape键按下且多边形标注对象尚未闭合时，清除当前未完成标注的所有顶点数据并退出多边形标注交互状态。

4.如权利要求1所述的方法，其特征在于，在keypoint关键点模式下，渲染关键点标注对象时绘制内圆和外环双层结构，其中内圆半径为5像素并以实心填充渲染，外环以同色系线条渲染，关键点的颜色根据所述关键点标注对象所属的标签类别从预设的标注类别颜色配置中获取。

5.如权利要求1所述的方法，其特征在于，在line折线模式下，实时渲染已添加的各顶点以及各顶点之间的线段路径，在enter键按下且顶点数量小于2时保持折线交互状态等待继续添加顶点。

6.一种基于canvas的多模式工业图像在线标注系统，其特征在于，包括：画布加载模块，用于在web页面中创建canvas画布并在所述canvas画布上加载待标注的工业图像；模式切换模块，用于根据接收到的模式切换指令确定当前标注模式，所述当前标注模式为bbox矩形框模式、polygon多边形模式、keypoint关键点模式和line折线模式中的一种；交互控制模块，用于在所述canvas画布上监听鼠标事件和键盘事件，根据所述当前标注模式的交互逻辑生成对应的标注对象：在bbox矩形框模式下，通过鼠标按下事件记录起始坐标，在鼠标拖拽过程中实时更新矩形框大小，在鼠标释放事件中判断矩形框的宽度和高度均大于预设像素阈值时生成包含左上角坐标和右下角坐标的矩形框标注对象；在polygon多边形模式下，通过逐次鼠标点击事件添加各顶点坐标并实时绘制各顶点之间的连续虚线路径，在enter键按下且顶点数量大于或等于3时生成包含顶点坐标集合的多边形标注对象；在keypoint关键点模式下，通过鼠标点击事件在点击位置生成包含单个坐标点的关键点标注对象；在line折线模式下，通过逐次鼠标点击事件添加各顶点坐标，在enter键按下且顶点数量大于或等于2时生成包含顶点坐标集合的折线标注对象；坐标映射模块，用于通过所述canvas画布元素上的边界矩形获取方法获取所述canvas画布在浏览器中渲染的dom显示尺寸与所述canvas画布的实际分辨率，计算所述dom显示尺寸与所述实际分辨率之间的缩放比例，将鼠标事件产生的dom坐标根据所述缩放比例映射为canvas内部坐标，使得标注对象的坐标数据基于所述工业图像的原始分辨率存储；数据管理模块，用于将生成的标注对象存入标注数据数组，每一标注对象包含类型标识、标签名称、坐标点集合和唯一标识，通过所述标注数据数组驱动侧边栏列表的渲染更新。

7.如权利要求6所述的系统，其特征在于，所述交互控制模块在bbox矩形框模式下将所述预设像素阈值设置为5像素，当鼠标释放时矩形框的宽度小于或等于5像素或高度小于或等于5像素时放弃生成所述矩形框标注对象；在polygon多边形模式下进一步监听escape键事件，当escape键按下且多边形标注对象尚未闭合时清除当前未完成标注的所有顶点数据并退出多边形标注交互状态；在line折线模式下实时渲染已添加的各顶点以及各顶点之间的线段路径，在enter键按下且顶点数量小于2时保持折线交互状态等待继续添加顶点。

8.如权利要求6所述的系统，其特征在于，所述交互控制模块在keypoint关键点模式下渲染关键点标注对象时绘制内圆和外环双层结构，其中内圆半径为5像素并以实心填充渲染，外环以同色系线条渲染，关键点的颜色根据所述关键点标注对象所属的标签类别从预设的标注类别颜色配置中获取。

9.一种终端设备，其特征在于，包括如权利要求6至8任一项所述的基于canvas的多模式工业图像在线标注系统。

10.一种计算机可读存储介质，其特征在于，存储有计算机程序，所述计算机程序被处理器执行时实现如权利要求1至5任一项所述的基于canvas的多模式工业图像在线标注方法。