CN114398571A - 图像标注方法、图像标注系统、电子装置和存储介质 - Google Patents

图像标注方法、图像标注系统、电子装置和存储介质 Download PDF

Info

Publication number
CN114398571A
CN114398571A CN202111490838.XA CN202111490838A CN114398571A CN 114398571 A CN114398571 A CN 114398571A CN 202111490838 A CN202111490838 A CN 202111490838A CN 114398571 A CN114398571 A CN 114398571A
Authority
CN
China
Prior art keywords
offset
image
canvas
current
vertical direction
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202111490838.XA
Other languages
English (en)
Inventor
于慧洁
陈斐洋
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Zhejiang Dahua Technology Co Ltd
Original Assignee
Zhejiang Dahua Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Zhejiang Dahua Technology Co Ltd filed Critical Zhejiang Dahua Technology Co Ltd
Priority to CN202111490838.XA priority Critical patent/CN114398571A/zh
Publication of CN114398571A publication Critical patent/CN114398571A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/957—Browsing optimisation, e.g. caching or content distillation
    • G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/04845—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range for image manipulation, e.g. dragging, rotation, expansion or change of colour
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
    • G06F3/0488—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T7/00—Image analysis
    • G06T7/30—Determination of transform parameters for the alignment of images, i.e. image registration
    • G06T7/33—Determination of transform parameters for the alignment of images, i.e. image registration using feature-based methods
    • G06T7/344—Determination of transform parameters for the alignment of images, i.e. image registration using feature-based methods involving models

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • Databases & Information Systems (AREA)
  • Data Mining & Analysis (AREA)
  • Computer Vision & Pattern Recognition (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本申请涉及一种图像标注方法、系统、电子装置和存储介质，通过响应于第一终端设备的操作事件，根据操作事件获取图像的当前缩放比例；根据当前缩放比例确定画布分别在水平方向和竖直方向的偏移量，其中，画布用于在HTML页面中加载标注对象；确定画布的当前尺寸，并根据画布的当前尺寸、画布分别在水平方向和竖直方向的偏移量更新画布；根据当前缩放比例、画布分别在水平方向和竖直方向的偏移量，确定标注对象的当前位置，并在更新后的画布中按照标注对象的当前位置加载标注对象，解决了相关技术中图像经缩放操作后存在标注对象偏离目标的问题，实现了动态且准确的图像标注。

Description

图像标注方法、图像标注系统、电子装置和存储介质
技术领域
本申请涉及图像处理技术领域，特别是涉及图像标注方法、图像标注系统、电子装置和存储介质。
背景技术
图像标注是在图像上选中目标并对其进行标注，标注的准确性会直接影响算法处理的效果。相关技术提供了以下标注方法：
方法一：在屏幕当前显示的画面中，获取以触摸信号的触摸点为中心的局部画面内容，将该局部画面内容在屏幕上放大显示。
方法二：将导航中的地图显示划分为两部分，一部分为地图本身，一部分为辅助显示的附加画页，附加画页中可以放置放大图、地图信息；导航的显示模块除了处理原来的地图描画，还处理附加画页中的描画信息。
通常图像中的目标比较小，需要将图像先进行放大再标注，相关技术虽然都实现了图像的缩放，但是，标注对象是叠加在图像上方，对于某些已经标注完成的图像，若再对图像进行缩放操作，将导致标注对象和目标发生相对偏移，影响标注的准确性。
针对相关技术中的图像经缩放操作后存在标注对象偏离目标的问题，目前还没有提出有效的解决方案。
发明内容
在本实施例中提供了一种图像标注方法、系统、电子装置和存储介质，以解决相关技术中图像经缩放操作后存在标注对象偏离目标的问题。
第一个方面，在本实施例中提供了一种，图像标注方法，包括：
响应于第一终端设备的操作事件，根据所述操作事件获取图像的当前缩放比例；
根据所述当前缩放比例确定画布分别在水平方向和竖直方向的偏移量，其中，所述画布用于在HTML页面中加载标注对象；
确定所述画布的当前尺寸，并根据所述画布的当前尺寸、所述画布分别在水平方向和竖直方向的偏移量更新所述画布；
根据所述当前缩放比例、所述画布分别在水平方向和竖直方向的偏移量，确定所述标注对象的当前位置，并在更新后的所述画布中按照所述标注对象的当前位置加载所述标注对象。
在其中一些实施例中，所述HTML页面中设置有可视区，根据所述当前缩放比例确定画布分别在水平方向和竖直方向的偏移量包括：
根据所述当前缩放比例确定所述可视区分别在水平方向和竖直方向的偏移量；
将所述可视区在水平方向的偏移量设置为所述画布在水平方向的偏移量，以及，将所述可视区在竖直方向的偏移量设置为所述画布在竖直方向的偏移量。
在其中一些实施例中，在根据所述当前缩放比例确定所述可视区分别在水平方向和竖直方向的偏移量之后，所述方法还包括：
根据所述可视区分别在水平方向和竖直方向的偏移量，在所述HTML页面中移动所述可视区。
在其中一些实施例中，所述HTML页面中设置有可视区，确定所述画布的当前尺寸包括：
获取所述可视区的尺寸和所述图像的当前尺寸，将所述可视区的尺寸和所述图像的当前尺寸进行比较，根据比较结果确定所述画布的当前尺寸。
在其中一些实施例中，根据所述当前缩放比例、所述画布分别在水平方向和竖直方向的偏移量，确定所述标注对象的当前位置包括：
根据所述当前缩放比例和所述画布分别在水平方向和竖直方向的偏移量，确定所述标注对象在预设缩放比例下分别在水平方向和竖直方向的偏移量；
根据所述当前缩放比例、所述标注对象在预设缩放比例下分别在水平方向和竖直方向的偏移量，确定所述标注对象的当前位置。
在其中一些实施例中，所述第一终端设备的操作事件包括鼠标事件，响应于第一终端设备的操作事件，根据所述操作事件获取图像的当前缩放比例包括：
根据所述鼠标事件检测鼠标滚轮的滚动方向；
根据所述鼠标滚轮的滚动方向确定所述图像的当前缩放比例。
在其中一些实施例中，在根据所述鼠标滚轮的滚动方向确定所述图像的当前缩放比例之前，所述方法还包括：
设置所述鼠标滚轮滚动方向和所述图像缩放方向的关系，以及，设置所述鼠标滚轮每次滚动时缩放比例的变化量。
在其中一些实施例中，所述HTML页面中设置有可视区，所述方法还包括：
根据所述鼠标事件检测所述鼠标的位置是否发生改变；
在检测到所述鼠标的位置发生改变的情况下，获取所述鼠标的偏移量、所述可视区分别在水平方向和竖直方向的初始偏移量，根据所述当前缩放比例、所述鼠标的偏移量、所述可视区分别在水平方向和竖直方向的初始偏移量，更新所述可视区分别在水平方向和竖直方向的偏移量；
根据更新后的所述可视区分别在水平方向和竖直方向的偏移量，在所述HTML页面中移动所述可视区。
在其中一些实施例中，所述第一终端设备的操作事件包括触控事件，响应于第一终端设备的操作事件，根据所述操作事件获取图像的当前缩放比例包括：
根据所述触控事件检测触控面板上多个触点间的滑动模式；
根据所述多个触点间的滑动模式确定所述图像的当前缩放比例。
在其中一些实施例中，根据所述多个触点间的滑动模式确定所述图像的当前缩放比例之前，所述方法还包括：
设置所述多个触点间的滑动模式和所述图像缩放方向的关系，以及，设置所述多个触点间每次发生相对运动时缩放比例的变化量。
在其中一些实施例中，所述HTML页面中设置有可视区，所述方法还包括：
根据所述触控事件检测所述触控面板上是否存在预设手势；
在检测到所述触控面板上存在预设手势的情况下，获取所述预设手势下触点的滑动次数、所述可视区分别在水平方向和竖直方向的初始偏移量，根据所述当前缩放比例、所述触点的滑动次数、所述可视区分别在水平方向和竖直方向的初始偏移量，更新所述可视区分别在水平方向和竖直方向的偏移量；
根据更新后的所述可视区分别在水平方向和竖直方向的偏移量，在所述HTML页面中移动所述可视区。
第二个方面，在本实施例中提供了一种图像标注系统，包括：第一终端设备和第二终端设备，所述第一终端设备与所述第二终端设备连接，所述第一终端设备用于生成操作事件，所述第二终端设备用于执行上述第一个方面所述的图像标注方法。
第三个方面，在本实施例中提供了一种电子装置，包括存储器、处理器以及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述第一个方面所述的图像标注方法。
第四个方面，在本实施例中提供了一种存储介质，其上存储有计算机程序，该程序被处理器执行时实现上述第一个方面所述的图像标注方法的步骤。
与相关技术相比，在本实施例中提供的图像标注方法、系统、电子装置和存储介质，通过响应于第一终端设备的操作事件，根据操作事件获取图像的当前缩放比例；根据当前缩放比例确定画布分别在水平方向和竖直方向的偏移量，其中，画布用于在HTML页面中加载标注对象；确定画布的当前尺寸，并根据画布的当前尺寸、画布分别在水平方向和竖直方向的偏移量更新画布；根据当前缩放比例、画布分别在水平方向和竖直方向的偏移量，确定标注对象的当前位置，并在更新后的画布中按照标注对象的当前位置加载标注对象，解决了相关技术中图像经缩放操作后存在标注对象偏离目标的问题，实现了动态且准确的图像标注。
本申请的一个或多个实施例的细节在以下附图和描述中提出，以使本申请的其他特征、目的和优点更加简明易懂。
附图说明
此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：
图1是本申请一实施例的图像标注方法的终端的硬件结构框图；
图2是本申请一实施例的图像标注方法的流程图一；
图3是本申请一实施例的图像标注方法的流程图二；
图4是本申请一优选实施例的图像标注方法的流程图；
图5是本申请一实施例的HTML页面示意图；
图6是本申请一实施例的HTML节点示意图。
具体实施方式
为更清楚地理解本申请的目的、技术方案和优点，下面结合附图和实施例，对本申请进行了描述和说明。
除另作定义外，本申请所涉及的技术术语或者科学术语应具有本申请所属技术领域具备一般技能的人所理解的一般含义。在本申请中的“一”、“一个”、“一种”、“该”、“这些”等类似的词并不表示数量上的限制，它们可以是单数或者复数。在本申请中所涉及的术语“包括”、“包含”、“具有”及其任何变体，其目的是涵盖不排他的包含；例如，包含一系列步骤或模块(单元)的过程、方法和系统、产品或设备并未限定于列出的步骤或模块(单元)，而可包括未列出的步骤或模块(单元)，或者可包括这些过程、方法、产品或设备固有的其他步骤或模块(单元)。在本申请中所涉及的“连接”、“相连”、“耦接”等类似的词语并不限定于物理的或机械连接，而可以包括电气连接，无论是直接连接还是间接连接。在本申请中所涉及的“多个”是指两个或两个以上。“和/或”描述关联对象的关联关系，表示可以存在三种关系，例如，“A和/或B”可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。通常情况下，字符“/”表示前后关联的对象是一种“或”的关系。在本申请中所涉及的术语“第一”、“第二”、“第三”等，只是对相似对象进行区分，并不代表针对对象的特定排序。
在本实施例中提供的方法实施例可以在终端、计算机或者类似的运算装置中执行。比如在终端上运行，图1是本申请一实施例的图像标注方法的终端的硬件结构框图。如图1所示，终端可以包括一个或多个(图1中仅示出一个)处理器102和用于存储数据的存储器104，其中，处理器102可以包括但不限于微处理器MCU或可编程逻辑器件FPGA等的处理装置。上述终端还可以包括用于通信功能的传输设备106以及输入输出设备108。本领域普通技术人员可以理解，图1所示的结构仅为示意，其并不对上述终端的结构造成限制。例如，终端还可包括比图1中所示更多或者更少的组件，或者具有与图1所示出的不同配置。
存储器104可用于存储计算机程序，例如，应用软件的软件程序以及模块，如在本实施例中的图像标注方法对应的计算机程序，处理器102通过运行存储在存储器104内的计算机程序，从而执行各种功能应用以及数据处理，即实现上述的方法。存储器104可包括高速随机存储器，还可包括非易失性存储器，如一个或者多个磁性存储装置、闪存、或者其他非易失性固态存储器。在一些实例中，存储器104可进一步包括相对于处理器102远程设置的存储器，这些远程存储器可以通过网络连接至终端。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。
传输设备106用于经由一个网络接收或者发送数据。上述的网络包括终端的通信供应商提供的无线网络。在一个实例中，传输设备106包括一个网络适配器(NetworkInterface Controller，简称为NIC)，其可通过基站与其他网络设备相连从而可与互联网进行通讯。在一个实例中，传输设备106可以为射频(Radio Frequency，简称为RF)模块，其用于通过无线方式与互联网进行通讯。
在本实施例中提供了一种图像标注方法，图2是本申请一实施例的图像标注方法的流程图一，如图2所示，该流程包括如下步骤：
步骤S201，响应于第一终端设备的操作事件，根据操作事件获取图像的当前缩放比例。
第一终端设备可以是鼠标，与之相应的操作事件包括但不限于点击鼠标、滚动鼠标滚轮。第一终端设备也可以是触控面板，与之相应的操作事件包括但不限于在触控面板上进行点击、按压、滑动。
步骤S202，根据当前缩放比例确定画布分别在水平方向和竖直方向的偏移量，其中，画布用于在HTML页面中加载标注对象。
具体实施时，可以在HTML页面中先设置参考坐标系和指示器，以指示器作为参考定点计算画布的偏移量，计算公式如下：
leftTrans＝x_move×(zoomTimes-1)
topTrans＝y_move×(zoomTimes-1)
其中，x_move代表在图像缩放之后指示器的横坐标，y_move代表在图像缩放之后指示器的纵坐标，leftTrans代表指示器在水平方向的偏移量，topTrans代表指示器在竖直方向的偏移量，zoomTimes代表当前缩放比例。
x_move＝mouse_x/zoomTimes+xTranslate
y_move＝mouse_y/zoomTimes+yTranslate
其中，mouse_x代表在图像缩放之前指示器的横坐标，mouse_y代表在图像缩放之前指示器的纵坐标，xTranslate代表在预设缩放比例下指示器在水平方向的偏移量，yTranslate代表在预设缩放比例下指示器在竖直方向的偏移量，预设缩放比例可以是一倍图比例。
画布包括Canvas元素，当然，画布还可以是其他任意一种支持在HTML页面绘制图形的元素。
标注对象为用于在图像中标注目标的几何图形，标注对象包括但不限于空心几何图形、填充几何图形、透明几何图形，其中，几何图形可以是规则多边形、不规则多边形、圆形、椭圆形中的任意一种。
步骤S203，确定画布的当前尺寸，并根据画布的当前尺寸、画布分别在水平方向和竖直方向的偏移量更新画布。
在HTML页面中将画布按照其当前尺寸进行布置，以及按照其分别在水平方向和竖直方向的偏移量进行移动，得到更新后的画布。其中，画布的当前尺寸可以取经缩放后的图像的当前尺寸。
步骤S203，根据当前缩放比例、画布分别在水平方向和竖直方向的偏移量，确定标注对象的当前位置，并在更新后的画布中按照标注对象的当前位置加载标注对象。
获取标注对象的初始位置，为(x1,y1)，重新调整后，设其当前位置变为(x2,y2)，则有：
x2＝x1×zoomTimes-leftTrans
y2＝y1×zoomTimes-topTrans
根据当前位置，在画布中重新绘制标注对象。
在上述步骤S201至S203中，在对图像进行缩放操作的情况下，考虑到画布和图像的位置会发生相对变化，根据当前缩放比例，适应性设置画布的偏移量，使得画布和图像的位置保持相对不变，再根据当前缩放比例和画布的偏移量调整标注对像的位置，使得标注对象跟随图像的缩放结果进行适应性缩放和移动，保证标注对象不会偏离目标。通过上述步骤，解决了相关技术中图像经缩放操作后存在标注对象偏离目标的问题，实现了动态且准确的图像标注。
在本申请的一个实施例中，HTML页面中设置有可视区，图3是本申请一实施例的图像标注方法的流程图二，如图3所示，根据当前缩放比例确定画布分别在水平方向和竖直方向的偏移量包括如下步骤：
步骤S301，根据当前缩放比例确定可视区分别在水平方向和竖直方向的偏移量。
具体实施时，可以参考上述方法计算画布的偏移量，计算公式如下：
scrollLeft＝x_move×(zoomTimes-1)
scrollTop＝y_move×(zoomTimes-1)
其中，x_move代表指示器的横坐标，y_move代表指示器的纵坐标，scrollLeft代表可视区在水平方向的偏移量，scrollTop代表可视区在竖直方向的偏移量，zoomTimes代表当前缩放比例。
步骤S302，将可视区在水平方向的偏移量设置为画布在水平方向的偏移量，以及，将可视区在竖直方向的偏移量设置为画布在竖直方向的偏移量。
在本实施例中，由于图像的缩放，可视区分别在水平方向和竖直方向发生了偏移，会使画布的位置也随之发生变化，需要通过设置画布的偏移量来对抗这种变化，保证画布的视觉位置仍然位于可视区的左上顶点，在设置画布的偏移量时，将可视区的偏移量设置为画布的偏移量，使得调整后的画布位置不脱离可视区的范围。
在缩放图像的过程中，默认以图像中心进行缩放，导致指示器的位置相对于图像发生偏移，针对该问题，在本申请的一个实施例中提供了如下解决方案：
在根据当前缩放比例确定可视区分别在水平方向和竖直方向的偏移量之后，根据可视区分别在水平方向和竖直方向的偏移量，在HTML页面中移动可视区。
通过可视区的偏移量在HTML页面中移动可视区，能够使指示器和图像的位置保持相对不变，从而使得标注对象和图像都以指示器为中心进行缩放。具体实施时，可以在HTML页面中设置水平滚动条和竖直滚动条，通过滚动这两个滚动条，实现可视区的移动，这样，在视觉效果上，就可以看到标注对象和图像都以指示器为中心进行缩放。
在本申请的一个实施例中，在图像经缩放操作后，可能图像的当前尺寸会超过可视区的尺寸，或者图像的当前尺寸小于可视区的尺寸，如果直接将图像的当前尺寸设置为画布的当前尺寸，则仍旧出现标注不准确的情况。为此，在本申请的一个实施例中，在确定画布的当前尺寸时，将获取可视区的尺寸和图像的当前尺寸，将可视区的尺寸和图像的当前尺寸进行比较，根据比较结果确定画布的当前尺寸。
具体实施时，当图像宽度小于可视区宽度时，画布宽度取图像宽度，否则取可视区宽度；以及，当图像高度小于可视区高度时，画布高度取图像高度，否则取可视区宽度。如此设置，可以使得画布始终处于一个合理的尺寸范围之内，避免再次引发标注不准确的情况。
在本申请的一个实施例中，根据当前缩放比例、画布分别在水平方向和竖直方向的偏移量，确定标注对象的当前位置包括：
根据当前缩放比例和画布分别在水平方向和竖直方向的偏移量，确定标注对象在预设缩放比例下分别在水平方向和竖直方向的偏移量；根据当前缩放比例、标注对象在预设缩放比例下分别在水平方向和竖直方向的偏移量，确定标注对象的当前位置。
在画布中重新绘制标注对象时，可以先获取一倍图比例下标注对象各像素点的初始位置(x1,y1)，设标注对象在一倍图比例下在水平方向的偏移量为xTranslate，在竖直方向的偏移量为yTranslate，重新调整后，设标注对象上各像素点的当前位置变为(x2,y2)，则有：
xTranslate＝leftTrans/zoomTimes
yTranslate＝topTrans/zoomTimes
x2＝(x1-xTranslate)×zoomTimes
y2＝(y1-yTranslate)×zoomTimes
在本实施例中，预设缩放比例不限于是一倍图比例，也可以是其他数值，只要预设缩放比例和标注对象的初始位置相对应即可。
在本申请的一个实施例中，第一终端设备的操作事件包括鼠标事件，可以根据鼠标事件检测鼠标滚轮的滚动方向；根据鼠标滚轮的滚动方向和确定图像的当前缩放比例。
例如，鼠标滚轮向第一方向滚动代表放大图像，且向第一方向每滚动一次代表放大N倍；鼠标滚轮向第二方向滚动代表缩小图像，且向第二方向每滚动一次代表缩小N倍。
相应地，在根据鼠标滚轮的滚动方向确定图像的当前缩放比例之前，可以设置鼠标滚轮滚动方向和图像缩放方向的关系，以及，设置鼠标滚轮每次滚动时缩放比例的变化量。
鼠标事件不仅可以是点击鼠标、滚动鼠标滚轮，还可以是滑动鼠标，面对这一情况，在本申请的一个实施例中，可以根据鼠标事件检测鼠标的位置是否发生改变；在检测到鼠标的位置发生改变的情况下，获取鼠标的偏移量、可视区分别在水平方向和竖直方向的初始偏移量，根据当前缩放比例、鼠标的偏移量、可视区分别在水平方向和竖直方向的初始偏移量，更新可视区分别在水平方向和竖直方向的偏移量；根据更新后的可视区分别在水平方向和竖直方向的偏移量，在HTML页面中移动可视区。
如此设置，可以根据鼠标的滑动移动可视区，在视觉上形成图像内容也发生移动的效果。
在本申请的一个实施例中，可以根据触控事件检测触控面板上多个触点间的滑动模式；根据多个触点间的滑动模式确定图像的当前缩放比例。
例如，多个触点间相对远离代表放大图像，且在多个触点相对远离的同时，每伸长一次代表放大N倍；多个触点间相对靠近代表缩小图像，且在多个触点相对靠近的同时，每缩进一次代表缩小N倍；
相应地，在根据多个触点间的滑动模式确定图像的当前缩放比例之前，可以设置多个触点间的滑动模式和图像缩放方向的关系，以及，设置多个触点间每次发生相对运动时缩放比例的变化量。
触控事件不仅可以是多个触点间相对远离、靠近，还可以是预设手势，面对这一情况，在本申请的一个实施例中，可以根据触控事件检测触控面板上是否存在预设手势；在检测到触控面板上存在预设手势的情况下，获取预设手势下触点的滑动次数、可视区分别在水平方向和竖直方向的初始偏移量，根据当前缩放比例、触点的滑动次数、可视区分别在水平方向和竖直方向的初始偏移量，更新可视区分别在水平方向和竖直方向的偏移量；根据更新后的可视区分别在水平方向和竖直方向的偏移量，在HTML页面中移动可视区。
如此设置，可以根据预设手势移动可视区，在视觉上形成图像内容也发生移动的效果。
以下将通过优选实施例介绍本申请的图像标注方法，图4是本申请一优选实施例的图像标注方法的流程图，如图4所示，该流程包括如下步骤：
步骤S401，获取一倍图比例下图像在视图中的等比例最大尺寸。
在HTML页面初始化过程中，获取图像的实际尺寸(naturalWidth、naturalHeight)和可视区的尺寸(containerWidth、containerHeight)。
可视区的宽高比例＝containerWidth/containerHeight
图像的原始宽高比例＝naturalWidth/naturalHeight
设置Canvas的尺寸(width、height)，可以先获取一倍图比例下图像尺寸，然后取图像尺寸作为Canvas的尺寸，其中，width为一倍图比例下Canvas在视图中的宽度，height为一倍图比例下Canvas在视图中的高度。
如果可视区的宽高比例大于图像的原始宽高比例：
则将width的值设置为naturalWidth/naturalHeight×containerHeight，将height的值设置为containerHeight；否则，将width的值设置为containerWidth，将height的值设置为containerWidth/(naturalWidth/naturalHeight)。
步骤S402，响应于鼠标滚轮滚动，获取当前缩放比例。
设置鼠标滚轮滚动方向和缩放方向的关系，鼠标往上滚动，则为放大，缩放比例(zoomTimes)加0.1，否则减0.1。
步骤S403，设置图像尺寸。
imgWidth＝width×zoomTimes
imgHeight＝height×zoomTimes
其中，imgWidth代表经过缩放后的图像宽度，imgHeight代表经过缩放后的图像高度，width代表一倍图比例下图像在视图中的等比例宽度，height代表一倍图比例下图像在视图中的等比例高度，zoomTimes代表缩放比例。
步骤S404，设置可视区的水平/竖直滚动距离。
图5是本申请一实施例的HTML页面示意图，图6是本申请一实施例的HTML节点示意图。
设置可视区的样式：position：relative；overflow：auto；
设置Canvas和图像父级的样式：position:absolute；
设置图像的样式：position：absolute；top：0；left：0；
通过设置HTML和图像父级的样式，Canvas和图像的位置在相对于父级可视区的左上顶点。
当鼠标在可视区滚动滚轮缩放图像的时候，默认以图像中心点放大，指示器会发生偏移。面对这种情况，获取一个定点在缩放前后的偏移量，据此设置可视区的滚动条水平偏移为scrollLeft，竖直偏移为scrollTop，则有：
scrollLeft＝x_move×(zoomTimes-1)
scrollTop＝y_move×(zoomTimes-1)
通过可视区水平和竖直滚动，从而使指示器的位置相对于图像保持不变。
步骤S405，设置Canvas尺寸。
当图像宽度小于可视区宽度时，Canvas宽度取图像宽度，否则取可视区宽度；以及，当图像高度小于可视区高度时，Canvas高度取图像高度，否则取可视区宽度：
canvasWidth＝Math.min(图像宽度，可视区宽度)
canvasHeight＝Math.min(图像高度，可视区高度)
步骤S406，设置Canvas位置。
由于可视区的水平/竖直滚距离发生了变化，会使Canvas的位置也随之发生变化，所以需要通过设置Canvas的偏移量来保证Canvas的视觉位置还是位于可视区的左上顶点。
设置leftTrans为Canvas在水平方向的偏移量，设置topTrans为Canvas在竖直方向的偏移量。则有：
leftTrans＝scrollLeft
topTrans＝scrollTop
步骤S407，重新绘制标注框。
在Canvas重新绘制标注框，需要重新计算坐标位置，可以先获取一倍图比例下标注对象上各像素点的初始位置(x1,y1)，设标注对象在一倍图比例下在水平方向的偏移量为xTranslate，在竖直方向的偏移量为yTranslate，则有
xTranslate＝leftTrans/zoomTimes
yTranslate＝topTrans/zoomTimes
重新调整后，设标注对象上各像素点的当前位置变为(x2,y2)，则有：
x2＝(x1-xTranslate)×zoomTimes
y2＝(y1-yTranslate)×zoomTimes
步骤S408，响应于鼠标滑动，移动可视区。
响应鼠标的位置改变，移动过程中，获取指示器当前位置和原始位置的差值，利用差值重新设置可视区的水平/竖直滚动距离，从而实现图像内容的移动。
new_scrollLeft＝scrollLeft–Δx×zoomTimes
new_scrollTop＝scrollTop–Δy×zoomTimes
其中，new_scrollLeft代表可视区新的水平滚动距离，new_scrollTop代表可视区新的竖直滚动距离，Δx代表指示器当前位置和原始位置的横坐标差值，Δy代表指示器当前位置和原始位置的纵坐标差值。
结合上述实施例的图像标注方法，在本实施例中，还提供了一种图像标注系统，该系统包括：第一终端设备和第二终端设备，第一终端设备与第二终端设备连接，第一终端设备用于生成操作事件，第二终端设备用于执行上述任一实施例中的图像标注方法。
在本申请的一个实施例中，第一终端设备可以是鼠标或者触控面板，第二终端设备可以是计算机、笔记本电脑、平板电脑或者智能手机。
在本实施例中还提供了一种电子装置，包括存储器和处理器，该存储器中存储有计算机程序，该处理器被设置为运行计算机程序以执行上述任一项方法实施例中的步骤。
可选地，上述电子装置还可以包括传输设备以及输入输出设备，其中，该传输设备和上述处理器连接，该输入输出设备和上述处理器连接。
可选地，在本实施例中，上述处理器可以被设置为通过计算机程序执行以下步骤：
S1，响应于第一终端设备的操作事件，根据操作事件获取图像的当前缩放比例；
S2，根据当前缩放比例确定画布分别在水平方向和竖直方向的偏移量，其中，画布用于在HTML页面中加载标注对象；
S3，确定画布的当前尺寸，并根据画布的当前尺寸、画布分别在水平方向和竖直方向的偏移量更新画布；
S4，根据当前缩放比例、画布分别在水平方向和竖直方向的偏移量，确定标注对象的当前位置，并在更新后的画布中按照标注对象的当前位置加载标注对象。
需要说明的是，在本实施例中的具体示例可以参考上述实施例及可选实施方式中所描述的示例，在本实施例中不再赘述。
此外，结合上述实施例中提供的图像标注方法，在本实施例中还可以提供一种存储介质来实现。该存储介质上存储有计算机程序；该计算机程序被处理器执行时实现上述实施例中的任意一种图像标注方法。
应该明白的是，这里描述的具体实施例只是用来解释这个应用，而不是用来对它进行限定。根据本申请提供的实施例，本领域普通技术人员在不进行创造性劳动的情况下得到的所有其它实施例，均属本申请保护范围。
显然，附图只是本申请的一些例子或实施例，对本领域的普通技术人员来说，也可以根据这些附图将本申请适用于其他类似情况，但无需付出创造性劳动。另外，可以理解的是，尽管在此开发过程中所做的工作可能是复杂和漫长的，但是，对于本领域的普通技术人员来说，根据本申请披露的技术内容进行的某些设计、制造或生产等更改仅是常规的技术手段，不应被视为本申请公开的内容不足。
“实施例”一词在本申请中指的是结合实施例描述的具体特征、结构或特性可以包括在本申请的至少一个实施例中。该短语出现在说明书中的各个位置并不一定意味着相同的实施例，也不意味着与其它实施例相互排斥而具有独立性或可供选择。本领域的普通技术人员能够清楚或隐含地理解的是，本申请中描述的实施例在没有冲突的情况下，可以与其它实施例结合。
以上所述实施例仅表达了本申请的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对专利保护范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本申请构思的前提下，还可以做出若干变形和改进，这些都属于本申请的保护范围。因此，本申请的保护范围应以所附权利要求为准。

Claims (14)

1.一种图像标注方法，其特征在于，包括：
响应于第一终端设备的操作事件，根据所述操作事件获取图像的当前缩放比例；
根据所述当前缩放比例确定画布分别在水平方向和竖直方向的偏移量，其中，所述画布用于在HTML页面中加载标注对象；
确定所述画布的当前尺寸，并根据所述画布的当前尺寸、所述画布分别在水平方向和竖直方向的偏移量更新所述画布；
根据所述当前缩放比例、所述画布分别在水平方向和竖直方向的偏移量，确定所述标注对象的当前位置，并在更新后的所述画布中按照所述标注对象的当前位置加载所述标注对象。
2.根据权利要求1所述的图像标注方法，其特征在于，所述HTML页面中设置有可视区，根据所述当前缩放比例确定画布分别在水平方向和竖直方向的偏移量包括：
根据所述当前缩放比例确定所述可视区分别在水平方向和竖直方向的偏移量；
将所述可视区在水平方向的偏移量设置为所述画布在水平方向的偏移量，以及，将所述可视区在竖直方向的偏移量设置为所述画布在竖直方向的偏移量。
3.根据权利要求2所述的图像标注方法，其特征在于，在根据所述当前缩放比例确定所述可视区分别在水平方向和竖直方向的偏移量之后，所述方法还包括：
根据所述可视区分别在水平方向和竖直方向的偏移量，在所述HTML页面中移动所述可视区。
4.根据权利要求1所述的图像标注方法，其特征在于，所述HTML页面中设置有可视区，确定所述画布的当前尺寸包括：
获取所述可视区的尺寸和所述图像的当前尺寸，将所述可视区的尺寸和所述图像的当前尺寸进行比较，根据比较结果确定所述画布的当前尺寸。
5.根据权利要求1所述的图像标注方法，其特征在于，根据所述当前缩放比例、所述画布分别在水平方向和竖直方向的偏移量，确定所述标注对象的当前位置包括：
根据所述当前缩放比例和所述画布分别在水平方向和竖直方向的偏移量，确定所述标注对象在预设缩放比例下分别在水平方向和竖直方向的偏移量；
根据所述当前缩放比例、所述标注对象在预设缩放比例下分别在水平方向和竖直方向的偏移量，确定所述标注对象的当前位置。
6.根据权利要求1所述的图像标注方法，其特征在于，所述第一终端设备的操作事件包括鼠标事件，响应于第一终端设备的操作事件，根据所述操作事件获取图像的当前缩放比例包括：
根据所述鼠标事件检测鼠标滚轮的滚动方向；
根据所述鼠标滚轮的滚动方向确定所述图像的当前缩放比例。
7.根据权利要求6所述的图像标注方法，其特征在于，在根据所述鼠标滚轮的滚动方向确定所述图像的当前缩放比例之前，所述方法还包括：
设置所述鼠标滚轮滚动方向和所述图像缩放方向的关系，以及，设置所述鼠标滚轮每次滚动时缩放比例的变化量。
8.根据权利要求6所述的图像标注方法，其特征在于，所述HTML页面中设置有可视区，所述方法还包括：
根据所述鼠标事件检测所述鼠标的位置是否发生改变；
在检测到所述鼠标的位置发生改变的情况下，获取所述鼠标的偏移量、所述可视区分别在水平方向和竖直方向的初始偏移量，根据所述当前缩放比例、所述鼠标的偏移量、所述可视区分别在水平方向和竖直方向的初始偏移量，更新所述可视区分别在水平方向和竖直方向的偏移量；
根据更新后的所述可视区分别在水平方向和竖直方向的偏移量，在所述HTML页面中移动所述可视区。
9.根据权利要求1所述的图像标注方法，其特征在于，所述第一终端设备的操作事件包括触控事件，响应于第一终端设备的操作事件，根据所述操作事件获取图像的当前缩放比例包括：
根据所述触控事件检测触控面板上多个触点间的滑动模式；
根据所述多个触点间的滑动模式确定所述图像的当前缩放比例。
10.根据权利要求9所述的图像标注方法，其特征在于，根据所述多个触点间的滑动模式确定所述图像的当前缩放比例之前，所述方法还包括：
设置所述多个触点间的滑动模式和所述图像缩放方向的关系，以及，设置所述多个触点间每次发生相对运动时缩放比例的变化量。
11.根据权利要求9所述的图像标注方法，其特征在于，所述HTML页面中设置有可视区，所述方法还包括：
根据所述触控事件检测所述触控面板上是否存在预设手势；
在检测到所述触控面板上存在预设手势的情况下，获取所述预设手势下触点的滑动次数、所述可视区分别在水平方向和竖直方向的初始偏移量，根据所述当前缩放比例、所述触点的滑动次数、所述可视区分别在水平方向和竖直方向的初始偏移量，更新所述可视区分别在水平方向和竖直方向的偏移量；
根据更新后的所述可视区分别在水平方向和竖直方向的偏移量，在所述HTML页面中移动所述可视区。
12.一种图像标注系统，其特征在于，包括：第一终端设备和第二终端设备，所述第一终端设备与所述第二终端设备连接，所述第一终端设备用于生成操作事件，所述第二终端设备用于执行权利要求1至11中任一项所述的图像标注方法。
13.一种电子装置，包括存储器和处理器，其特征在于，所述存储器中存储有计算机程序，所述处理器被设置为运行所述计算机程序以执行权利要求1至11中任一项所述的图像标注方法。
14.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1至11中任一项所述的图像标注方法的步骤。
CN202111490838.XA 2021-12-08 2021-12-08 图像标注方法、图像标注系统、电子装置和存储介质 Pending CN114398571A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202111490838.XA CN114398571A (zh) 2021-12-08 2021-12-08 图像标注方法、图像标注系统、电子装置和存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202111490838.XA CN114398571A (zh) 2021-12-08 2021-12-08 图像标注方法、图像标注系统、电子装置和存储介质

Publications (1)

Publication Number Publication Date
CN114398571A true CN114398571A (zh) 2022-04-26

Family

ID=81226763

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202111490838.XA Pending CN114398571A (zh) 2021-12-08 2021-12-08 图像标注方法、图像标注系统、电子装置和存储介质

Country Status (1)

Country Link
CN (1) CN114398571A (zh)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN115309311A (zh) * 2022-09-14 2022-11-08 河北蓝蜂信息科技有限公司 基于web页面绘图的画布缩放方法及装置

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN115309311A (zh) * 2022-09-14 2022-11-08 河北蓝蜂信息科技有限公司 基于web页面绘图的画布缩放方法及装置

Similar Documents

Publication Publication Date Title
US7986309B2 (en) Electronic device with touch screen and method of displaying information using the same
CN104615336B (zh) 一种信息处理方法及电子设备
EP1942403A2 (en) Data scrolling apparatus and method for mobile terminal
US10055050B2 (en) Touch panel detection area modification
US10901587B2 (en) Widget area adjustment method and apparatus
CN107204044B (zh) 一种基于虚拟现实的画面显示方法及相关设备
CN110007847B (zh) 基于触摸屏的书写方法、装置、设备及可读存储介质
CN112148398B (zh) 图像处理方法和装置
CN103365930A (zh) 网页内容显示控制系统及方法
CN109992337B (zh) 网页页面展示方法、装置及存储介质
CN111638818B (zh) 窗口位置调整方法、装置及电子设备
CN114398571A (zh) 图像标注方法、图像标注系统、电子装置和存储介质
CN105446609A (zh) 控制方法及电子设备
US10607379B2 (en) Graph drawing system
CN111143731A (zh) 一种网页界面缩放时的显示方法、装置及终端设备
CN108108417B (zh) 跨平台自适应控制的交互方法、系统、设备及存储介质
US20180300033A1 (en) Display method and display device
CN112631698A (zh) 数据显示方法、装置、计算机设备及存储介质
CN109766530B (zh) 图表边框的生成方法、装置、存储介质和电子设备
CN111767206B (zh) 一种内容单元露出呈现率的统计方法、装置及电子设备
JP2015032261A (ja) 表示装置および制御方法
CN113268307A (zh) 页面组件显示方法、装置、设备及存储介质
JP6520674B2 (ja) 表示システム、表示端末、表示方法、および表示プログラム
CN105677749B (zh) 一种页面显示方法及装置
CN112558850B (zh) 多显示器鼠标无缝移动方法、装置、计算机设备及介质

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination