CN108268626A - 一种html图像上添加、显示标记的方法及装置 - Google Patents

一种html图像上添加、显示标记的方法及装置 Download PDF

Info

Publication number
CN108268626A
CN108268626A CN201810027637.8A CN201810027637A CN108268626A CN 108268626 A CN108268626 A CN 108268626A CN 201810027637 A CN201810027637 A CN 201810027637A CN 108268626 A CN108268626 A CN 108268626A
Authority
CN
China
Prior art keywords
label
image
submodule
acquisition
daughter element
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
CN201810027637.8A
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.)
Institute of Microelectronics of CAS
Kunshan Branch Institute of Microelectronics of CAS
Original Assignee
Institute of Microelectronics of CAS
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 Institute of Microelectronics of CAS filed Critical Institute of Microelectronics of CAS
Priority to CN201810027637.8A priority Critical patent/CN108268626A/zh
Publication of CN108268626A publication Critical patent/CN108268626A/zh
Pending legal-status Critical Current

Links

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
    • 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/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • G06F16/986—Document structures and storage, e.g. HTML extensions

Landscapes

  • Engineering & Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • Theoretical Computer Science (AREA)
  • Data Mining & Analysis (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Information Transfer Between Computers (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本发明公开了一种HTML图像上添加、显示标记的方法及装置，属于网页设计技术领域。方法包括：当浏览器打开HTML页面时，对应的JavaScript脚本被加载并获取HTML页面中图像的标记记录集合，当标记记录集合为空时，获取鼠标在图像上的点击位置并添加标记，生成标记记录并保存后，继续获取HTML页面中图像的标记记录集合；当标记记录集合为非空时，根据其中含有的标记记录显示对应的标记，并获取鼠标在图像上的点击位置，如为无标记处，则执行上述添加标记的操作；如为有标记处，则显示对应标记的详细信息或不做任何操作。本发明中，无需引入任何插件即可在HTML图像上添加有别于图像的标记，以及显示各不同的标记。

Description

一种HTML图像上添加、显示标记的方法及装置
技术领域
本发明涉及网页设计技术领域，尤其涉及一种HTML图像上添加、显示标记的方法及装置。
背景技术
HTML(Hyper Text Markup Language，超文本标记语言)是标准通用标记语言下的一个应用，通过标记符号来标记要显示的网页中的各个部分，其包括<map>、<div>、<img>、<area>标签元素。
现有技术中，通常会有在网页或客户端已有的一幅图像上做标记的交互方式，简单的带有可点击区域的图像映射，可由HTML的标签元素——<map>、<area>来实现，即<area>标签元素嵌套在<map>标签元素内部，并在<area>标签元素中定义图像映射的区域。然而由于<area>标签元素只能定义可点击区域的形状和位置，而无法形成有别于图像的标记，因此用户在视觉上没有直观的表现，并且各<area>标签元素间也没有相互区分的直观辨识性，使得用户体验不友好。
发明内容
为解决现有技术的不足，本发明提供一种HTML图像上添加、显示标记的方法及装置。
一方面，本发明提供一种HTML图像上添加、显示标记的方法，当浏览器打开HTML页面时，对应的JavaScript脚本被加载并执行以下操作：
步骤S1：JavaScript脚本获取对应HTML页面中图像的标记记录集合，当所述标记记录集合为空时，获取鼠标在所述图像上的点击位置，执行步骤S2；当所述标记记录集合为非空时，执行步骤S3；
步骤S2：所述JavaScript脚本在获取的点击位置处添加标记，生成对应的标记记录并保存，返回步骤S1；
步骤S3：所述JavaScript脚本根据所述标记记录集合中含有的标记记录在所述图像中显示对应的标记；
步骤S4：所述JavaScript脚本获取鼠标在所述图像上的点击位置，如为无标记处，则返回步骤S2；如为有标记处，则显示对应标记的详细信息或者不做任何操作。
可选地所述步骤S1中，所述JavaScript脚本获取对应HTML页面中图像的标记记录集合，具体为：JavaScript脚本通过异步请求在服务器或者数据库中获取对应HTML页面中图像的标记记录集合；
对应地，所述步骤S2中，所述生成对应的标记记录并保存，具体为：JavaScript脚本生成对应的标记记录，并通过所述异步请求将生成的标记记录保存至所述服务器或者数据库中。
可选地，所述步骤S1之前，还包括：创建HTML文档对象模型，具体包括：
创建父容器，并设置所述父容器的显示样式；
创建所述父容器的第一子元素，并设置所述第一子元素的显示样式，所述第一子元素承载图像；
创建所述父容器的第二子元素，并设置所述第二子元素的显示样式，所述第二子元素承载所有标记，且所述第二子元素的堆叠顺序高于所述第一子元素；
对应地，所述步骤S2中，所述生成对应的标记记录并保存，具体包括：
步骤A1：所述JavaScript脚本获取当前HTML页面下图像的尺寸、鼠标的点击位置相对于所述图像的偏移量、用户设置的标记的详细信息；
步骤A2：所述JavaScript脚本根据所述HTML文档对象模型中各部分的显示样式、获取的图像的尺寸及所述偏移量，计算添加的标记的比例尺，保存所述比例尺及所述用户设置的标记的详细信息。
可选地，所述步骤S3，具体包括：
步骤B1：所述JavaScript脚本获取当前HTML页面下所述图像的尺寸；
步骤B2：所述JavaScript脚本根据所述标记记录集合中含有的各比例尺及获取的当前HTML页面下所述图像的尺寸，计算对应的各标记相对于所述图像的偏移量；
步骤B3：所述JavaScript脚本将所述各标记相对于所述图像的偏移量作为所述第二元素的各子元素，将所述各子元素拼接成HTML字符串并渲染在所述图像中对应的位置。
可选地，所述步骤S1中，当所述标记记录集合为非空时，所述方法还包括：当所述HTML页面被缩放时，返回步骤B1。
另一方面，本发明提供一种HTML图像上添加、显示标记的装置，包括：
第一获取模块，用于当浏览器打开HTML页面时，获取对应HTML页面中图像的标记记录集合；
第二获取模块，用于当所述第一获取模块获取的标记记录集合为空时，获取鼠标在所述图像上的点击位置；
添加模块，用于在所述第二获取模块获取的点击位置处添加标记；
生成保存模块，用于生成与所述添加模块添加的标记对应的标记记录并保存；
第一显示模块，用于当所述第一获取模块获取的标记记录集合为非空时，根据所述第一获取模块获取的标记记录集合中含有的标记记录在所述图像中显示对应的标记；
第三获取模块，用于在所述第一显示模块显示标记之后，获取鼠标在所述图像上的点击位置；
所述添加模块，还用于当所述第三获取模块获取的点击位置为无标记处时，在所述第三获取模块获取的点击位置处添加标记；
第二显示模块，用于当所述第三获取模块获取的点击位置为有标记处时，显示对应标记的详细信息。
可选地，所述第一获取模块具体用于：通过异步请求在服务器或者数据库中获取对应HTML页面中图像的标记记录集合；
对应地，所述生成保存模块具体用于：生成对应的标记记录，并通过所述异步请求将生成的标记记录保存至所述服务器或者数据库中。
可选地，所述装置还包括：创建模块；
所述创建模块，用于在所述第一获取模块获取对应HTML页面中图像的标记记录集合之前，创建HTML文档对象模型；
所述创建模块，具体包括：第一创建子模块、第二创建子模块和第三创建子模块；
所述第一创建子模块，用于创建父容器，并设置所述父容器的显示样式；
所述第二创建子模块，用于创建所述父容器的第一子元素，并设置所述第一子元素的显示样式，所述第一子元素承载图像；
所述第三创建子模块，用于创建所述父容器的第二子元素，并设置所述第二子元素的显示样式，所述第二子元素承载所有标记，且所述第二子元素的堆叠顺序高于所述第一子元素；
所述生成保存模块，具体包括：第一获取子模块、第一计算子模块和保存子模块；
所述第一获取子模块，用于获取当前HTML页面下图像的尺寸、鼠标的点击位置相对于所述图像的偏移量、用户设置的标记的详细信息；
所述第一计算子模块，用于根据所述创建模块创建的HTML文档对象模型中各部分的显示样式、所述第一获取子模块获取的图像的尺寸及偏移量，计算添加的标记的比例尺；
所述保存子模块，用于保存所述第一计算子模块计算的比例尺及所述第一获取子模块获取的用户设置的标记的详细信息。
可选地，所述第一显示模块具体包括：第二获取子模块、第二计算子模块和渲染子模块；
所述第二获取子模块，用于获取当前HTML页面下所述图像的尺寸；
所述第二计算子模块，用于根据所述第一获取模块获取的标记记录集合中含有的各比例尺及所述第二获取子模块获取的当前HTML页面下所述图像的尺寸，计算对应的各标记相对于所述图像的偏移量；
所述渲染子模块，用于将所述第二计算子模块得到的各标记相对于所述图像的偏移量作为所述第三创建子模块创建的第二元素的各子元素，将所述各子元素拼接成HTML字符串并渲染在所述图像中对应的位置。
可选地，当所述第一获取模块获取到的标记记录集合为非空时，所述第二获取子模块，还用于当所述HTML页面被缩放时，获取当前HTML页面下所述图像的尺寸。
本发明的优点在于：
本发明中，通过JavaScript脚本控制，而无需引入任何插件，即可在浏览器打开的HTML页面中实现在图像上添加有别于图像的标记，以及显示各个不同的标记，使得用户在视觉上有直观的感受，提升了用户体验；同时，能够自适应浏览器页面的宽度，在浏览器页面缩放时，仍能根据浏览器页面的调整实时调整标记的展现方式，并且适用于各种终端设备，如手机、平板等。
附图说明
通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并不认为是对本发明的限制。而且在整个附图中，用相同的参考符号表示相同的部件。在附图中：
附图1为本发明提供的一种HTML图像上添加、显示标记的方法流程图；
附图2为本发明提供的一种HTML图像上添加、显示标记的装置模块组成框图。
具体实施方式
下面将参照附图更详细地描述本公开的示例性实施方式。虽然附图中显示了本公开的示例性实施方式，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施方式所限制。相反，提供这些实施方式是为了能够更透彻地理解本公开，并且能够将本公开的范围完整的传达给本领域的技术人员。
实施例一
根据本发明的实施方式，提供一种HTML图像上添加、显示标记的方法，如图1所示，当浏览器打开HTML页面时，对应的JavaScript脚本被加载并执行以下操作：
步骤101：JavaScript脚本获取对应HTML页面中图像的标记记录集合，当获取的标记记录集合为空时，获取鼠标在图像上的点击位置，执行步骤102；当获取的标记记录集合为非空时，执行步骤103；
根据本发明的实施方式，步骤101之前还包括：步骤N：创建HTML文档对象模型；
在本实施例中，步骤N具体包括：
创建父容器，并设置父容器的显示样式；
创建父容器的第一子元素，并设置第一子元素的显示样式，第一子元素承载图像；
创建父容器的第二子元素，并设置第二子元素的显示样式，第二子元素承载所有标记，且第二子元素的堆叠顺序高于第一子元素。
优选地，在本实施例中，设置父容器的显示样式为相对定位，宽度使用百分比，可根据当前浏览器页面宽度的变化而变化，若其中的内容超出父容器所能承载的空间，则不显示超出部分；
优选地，在本实施例中，设置第一子元素的显示样式为宽度100％，高度自动，以保证图像的纵横比不变；
优选地，在本实施例中，设置第二子元素的显示样式为绝对定位，铺满整个父容器，且它的元素堆叠顺序比第一子元素高，以保证标记的展示和点击交互效果。
进一步地，在本实施例中，步骤101中JavaScript脚本获取对应HTML页面中图像的标记记录集合，具体为：JavaScript脚本通过异步请求在服务器或者数据库中获取对应HTML页面中图像的标记记录集合；
其中，异步请求具体为AJAX(Asynchronous Javascript And XML，即异步JavaScript和XML，是指一种创建交互式网页应用的网页开发技术)异步请求。
优选地，在本实施例中，每个标记记录中包括但不限于用户设置的标记的详细信息、标记的横向比例尺(以posX表示)和标记的纵向比例尺(posY表示)，其中，posX和posY的值在[0,1]。
步骤102：JavaScript脚本在获取的点击位置处添加标记，生成对应的标记记录并保存，返回步骤101；
其中，生成对应的标记记录并保存，具体包括：
步骤A1：JavaScript脚本获取当前HTML页面下图像的尺寸、鼠标的点击位置相对于图像的偏移量、用户设置的标记的详细信息；
具体地，JavaScript脚本获取当前HTML页面下图像的宽、高，鼠标相对于图像的X,Y坐标，即偏移量，以及用户设置的标记的详细信息等。
步骤A2：JavaScript脚本根据HTML文档对象模型中各部分的显示样式、获取的图像的尺寸及偏移量，计算添加的标记的比例尺，保存比例尺及用户设置的标记的详细信息。
具体地，JavaScript脚本根据HTML文档对象模型中各部分的显示样式、获取的图像的宽及鼠标相对于图像的X坐标计算标记的横向比例尺，获取的图像的高及鼠标相对于图像的Y坐标计算标记的纵向比例尺，保存计算的横向比例尺、纵向比例尺及用户设置的标记的详细信息。
进一步地，步骤102中生成对应的标记记录并保存，具体为：JavaScript脚本生成对应的标记记录，通过上述异步请求将生成的标记记录保存至服务器或者数据库中。
步骤103：JavaScript脚本根据获取的标记记录集合中含有的标记记录在图像中显示对应的标记；
根据本发明的实施方式，步骤103，具体包括：
步骤B1：JavaScript脚本获取当前HTML页面下图像的尺寸；
具体地，JavaScript脚本获取当前HTML页面下图像的宽(以imgWidth表示)和高(以imgHeight表示)。
步骤B2：JavaScript脚本根据获取的标记记录集合中含有的各比例尺及获取的当前HTML页面下图像的尺寸，计算对应的各标记相对于图像的偏移量；
具体地，JavaScript脚本根据获取的标记记录集合中含有的各比例尺中的横向比例尺和纵向比例尺、以及获取的当前HTML页面下图像的宽和高，计算对应的各标记相对于图像的左偏移量和上偏移量；
更加具体地，JavaScript脚本将获取的标记记录集合中含有的各比例尺中的横向比例尺记作posX，纵向比例尺记作posY，则对应的各标记相对于第二子元素的左偏移量(left值)为imgWidth*posX，上偏移量(top值)为imgHeight*posY；优选地，在本实施例中，在上述乘积中取整作为计算结果。
例如，在本实施例中，JavaScript脚本获取当前HTML页面下图像的宽imgWidth为200px，高imgHeight为400px，某一个标记的横向比例尺posX＝0.2，纵向比例尺posY＝0.7，则该标记的左偏移量为200*0.2＝40px，上偏移量为400*0.7＝280px。
步骤B3：JavaScript脚本将各标记相对于图像的偏移量作为第二元素的各子元素，将各子元素拼接成HTML字符串并渲染在图像中对应的位置。
具体地，JavaScript脚本在HTML文档对象模型中创建第二元素的各子元素<div>，并设置其显示样式为绝对定位；其中，每个<div>对应一个标记，记录对应标记相对于图像的偏移量，并将各子元素<div>拼接成HTML字符串后，渲染在图像中对应的位置。
进一步地，JavaScript脚本在HTML文档对象模型中创建第二元素的各子元素<div>时，还包括：在CSS(Cascading Style Sheets，叠层样式表)中设置各子元素<div>的相关描述，包括高宽、形状、背景等样式，以及输入文字，如，1、2、3等来表示标记的序号，从而将各标记进行区分。
优选地，在本实施例中，在CSS中设置各子元素<div>使用1/2的高度作为上外边距的负值，1/2的宽度作为左外边距的负值，从而抵消标记大小带来的位置偏移，保证标记的中心在指定的图像位置处。
需要指出地，在CSS中设置各子元素<div>的相关描述，可以采用默认的各描述，也可以自定义各描述，进行个性化设置。
对应地，将各子元素拼接成HTML字符串并渲染在图像中对应的位置，具体为：结合SCC中各子元素的相关描述，将各子元素按序号顺序拼接成HTML字符串，并按照描述的样式将对应的各标记渲染在图像中对应的位置。
更进一步地，根据本发明中的实施方式，步骤101中，当标记记录集合为非空时，该方法还包括：当HTML页面被缩放时，返回步骤B1。
具体地，当标记记录集合为非空，且HTML页面被缩放时，JavaScript脚本重新获取当前HTML页面下图像的尺寸、并根据获取的标记记录集合中含有的各比例尺及重新获取的当前HTML页面下图像的尺寸，重新计算对应的各标记相对于图像的偏移量，以保证各标记准确的显示在图像中对应的位置。
再进一步地，根据本发明中的实施方式，步骤101中，当获取的标记记录集合为空时，获取鼠标在图像上的点击位置之前，还包括执行上述步骤B1至步骤B3的操作，只是渲染内容为空，页面中显示的仍是原图像。
步骤104：JavaScript脚本获取鼠标在图像上的点击位置，如为无标记处，则返回步骤102；如为有标记处，则显示对应标记的详细信息或者不做任何操作。
其中，显示对应标记的详细信息，可以通过弹框的形式显示对应标记的详细信息，还可以为通过其他方式显示对应标记的详细信息。
实施例二
根据本发明的实施方式，提供一种HTML图像上添加、显示标记的装置，如图2所示，包括：
第一获取模块201，用于当浏览器打开HTML页面时，获取对应HTML页面中图像的标记记录集合；
第二获取模块202，用于当第一获取模块201获取的标记记录集合为空时，获取鼠标在图像上的点击位置；
添加模块203，用于在第二获取模块202获取的点击位置处添加标记；
生成保存模块204，用于生成与添加模块203添加的标记对应的标记记录并保存；
第一显示模块205，用于当第一获取模块201获取的标记记录集合为非空时，根据第一获取模块201获取的标记记录集合中含有的标记记录在图像中显示对应的标记；
第三获取模块206，用于在第一显示模块205显示标记之后，获取鼠标在图像上的点击位置；
添加模块203，还用于当第三获取模块206获取的点击位置为无标记处时，在第三获取模块206获取的点击位置处添加标记；
第二显示模块207，用于当第三获取模块206获取的点击位置为有标记处时，显示对应标记的详细信息。
根据本发明的实施方式，第一获取模块201具体用于：通过异步请求在服务器或者数据库中获取对应HTML页面中图像的标记记录集合；
对应地，生成保存模块204具体用于：生成对应的标记记录，并通过异步请求将生成的标记记录保存至对应地服务器或者数据库中。
根据本发明的实施方式，该装置还包括：创建模块；
创建模块，用于在第一获取模块201获取对应HTML页面中图像的标记记录集合之前，创建HTML文档对象模型；
在本实施例中，创建模块具体包括：第一创建子模块、第二创建子模块和第三创建子模块，其中：
第一创建子模块，用于创建父容器，并设置父容器的显示样式；
第二创建子模块，用于创建父容器的第一子元素，并设置第一子元素的显示样式，第一子元素承载图像；
第三创建子模块，用于创建父容器的第二子元素，并设置第二子元素的显示样式，第二子元素承载所有标记，且第二子元素的堆叠顺序高于第一子元素；
优选地，在本实施例中，第一创建子模块具体用于：创建父容器，并设置父容器的显示样式为相对定位，宽度使用百分比，可根据当前浏览器页面宽度的变化而变化，若其中的内容超出父容器所能承载的空间，则不显示超出部分；
优选地，在本实施例中，第二创建子模块具体用于：创建父容器的第一子元素，并设置第一子元素的显示样式为宽度100％，高度自动，以保证图像的纵横比不变；
优选地，在本实施例中，第三创建子模块具体用于：创建父容器的第二子元素，并设置第二子元素的显示样式为绝对定位，铺满整个父容器，且它的元素堆叠顺序比第一子元素高，以保证标记的展示和点击交互效果。
根据本发明的实施方式，生成保存模块204，具体包括：第一获取子模块、第一计算子模块和保存子模块，其中：
第一获取子模块，用于获取当前HTML页面下图像的尺寸、鼠标的点击位置相对于图像的偏移量、用户设置的标记的详细信息；
第一计算子模块，用于根据创建模块创建的HTML文档对象模型中各部分的显示样式、第一获取子模块获取的图像的尺寸及偏移量，计算添加的标记的比例尺；
保存子模块，用于保存第一计算子模块计算的比例尺及第一获取子模块获取的用户设置的标记的详细信息。
根据本发明的实施方式，第一获取子模块具体用于：获取当前HTML页面下图像的宽、高，鼠标相对于图像的X,Y坐标，即偏移量，以及用户设置的标记的详细信息等；
对应地，第一计算子模块具体用于：根据创建模块创建的HTML文档对象模型中各部分的显示样式、第一获取子模块获取的图像的宽及鼠标相对于图像的X坐标计算标记的横向比例尺，获取的图像的高及鼠标相对于图像的Y坐标计算标记的纵向比例尺；
对应地，保存子模块具体用于：保存第一计算子模块计算的横向比例尺、纵向比例尺及第一获取子模块获取的用户设置的标记的详细信息。
根据本发明的实施方式，第一显示模块205具体包括：第二获取子模块、第二计算子模块和渲染子模块，其中：
第二获取子模块，用于获取当前HTML页面下图像的尺寸；
第二计算子模块，用于根据第一获取模块获取的标记记录集合中含有的各比例尺及第二获取子模块获取的当前HTML页面下图像的尺寸，计算对应的各标记相对于图像的偏移量；
渲染子模块，用于将第二计算子模块得到的各标记相对于图像的偏移量作为第三创建子模块创建的第二元素的各子元素，将各子元素拼接成HTML字符串并渲染在图像中对应的位置。
其中，第二获取子模块具体用于：获取当前HTML页面下图像的宽(以imgWidth表示)和高(以imgHeight表示)；
其中，第二计算子模块具体用于：根据第一获取模块201获取的标记记录集合中含有的各比例尺中的横向比例尺和纵向比例尺、以及第二获取子模块获取的当前HTML页面下图像的宽和高，计算对应的各标记相对于图像的左偏移量和上偏移量；
更加具体地，第二计算子模块用于：将第一获取模块201获取的标记记录集合中含有的各比例尺中的横向比例尺记作posX，纵向比例尺记作posY，计算对应的各标记相对于第二子元素的左偏移量(left值)imgWidth*posX，上偏移量(top值)imgHeight*posY；优选地，在本实施例中，在上述乘积中取整作为计算结果。
进一步地，渲染子模块具体用于：在创建模块创建的HTML文档对象模型中创建第二元素的各子元素<div>，并设置其显示样式为绝对定位；其中，每个<div>对应一个标记，记录对应标记相对于图像的偏移量，并将各子元素<div>拼接成HTML字符串后，渲染在图像中对应的位置。
优选地，该装置还包括：设置模块；
设置模块，用于在CSS(Cascading Style Sheets，叠层样式表)中设置渲染子模块创建的各子元素<div>的相关描述，包括高宽、形状、背景等样式，以及输入文字，如，1、2、3等来表示标记的序号，从而将各标记进行区分。
对应地，渲染子模块，具体用于：将第二计算子模块得到的各标记相对于图像的偏移量作为第三创建子模块创建的第二元素的各子元素，将各子元素拼接成HTML字符串并结合设置模块在CSS中相关的描述，将对应的各标记渲染在图像中对应的位置。
根据本发明的实施方式，当第一获取模块201获取到的标记记录集合为非空时，第二获取子模块，还用于当HTML页面被缩放时，获取当前HTML页面下图像的尺寸。
本发明中，通过JavaScript脚本控制，而无需引入任何插件，即可在浏览器打开的HTML页面中实现在图像上添加有别于图像的标记，以及显示各个不同的标记，使得用户在视觉上有直观的感受，提升了用户体验；同时，能够自适应浏览器页面的宽度，在浏览器页面缩放时，仍能根据浏览器页面的调整实时调整标记的展现方式，并且适用于各种终端设备，如手机、平板等。
以上所述，仅为本发明较佳的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到的变化或替换，都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应以所述权利要求的保护范围为准。

Claims (10)

1.一种HTML图像上添加、显示标记的方法，其特征在于，当浏览器打开HTML页面时，对应的JavaScript脚本被加载并执行以下操作：
步骤S1：JavaScript脚本获取对应HTML页面中图像的标记记录集合，当所述标记记录集合为空时，获取鼠标在所述图像上的点击位置，执行步骤S2；当所述标记记录集合为非空时，执行步骤S3；
步骤S2：所述JavaScript脚本在获取的点击位置处添加标记，生成对应的标记记录并保存，返回步骤S1；
步骤S3：所述JavaScript脚本根据所述标记记录集合中含有的标记记录在所述图像中显示对应的标记；
步骤S4：所述JavaScript脚本获取鼠标在所述图像上的点击位置，如为无标记处，则返回步骤S2；如为有标记处，则显示对应标记的详细信息或者不做任何操作。
2.根据权利要求1所述的方法，其特征在于，
所述步骤S1中，所述JavaScript脚本获取对应HTML页面中图像的标记记录集合，具体为：JavaScript脚本通过异步请求在服务器或者数据库中获取对应HTML页面中图像的标记记录集合；
所述步骤S2中，所述生成对应的标记记录并保存，具体为：JavaScript脚本生成对应的标记记录，并通过所述异步请求将生成的标记记录保存至所述服务器或者数据库中。
3.根据权利要求1所述的方法，其特征在于，所述步骤S1之前，还包括：创建HTML文档对象模型，具体包括：
创建父容器，并设置所述父容器的显示样式；
创建所述父容器的第一子元素，并设置所述第一子元素的显示样式，所述第一子元素承载图像；
创建所述父容器的第二子元素，并设置所述第二子元素的显示样式，所述第二子元素承载所有标记，且所述第二子元素的堆叠顺序高于所述第一子元素；
所述步骤S2中，所述生成对应的标记记录并保存，具体包括：
步骤A1：所述JavaScript脚本获取当前HTML页面下图像的尺寸、鼠标的点击位置相对于所述图像的偏移量、用户设置的标记的详细信息；
步骤A2：所述JavaScript脚本根据所述HTML文档对象模型中各部分的显示样式、获取的图像的尺寸及所述偏移量，计算添加的标记的比例尺，保存所述比例尺及所述用户设置的标记的详细信息。
4.根据权利要求3所述的方法，其特征在于，所述步骤S3，具体包括：
步骤B1：所述JavaScript脚本获取当前HTML页面下所述图像的尺寸；
步骤B2：所述JavaScript脚本根据所述标记记录集合中含有的各比例尺及获取的当前HTML页面下所述图像的尺寸，计算对应的各标记相对于所述图像的偏移量；
步骤B3：所述JavaScript脚本将所述各标记相对于所述图像的偏移量作为所述第二元素的各子元素，将所述各子元素拼接成HTML字符串并渲染在所述图像中对应的位置。
5.根据权利要求4所述的方法，其特征在于，所述步骤S1中，当所述标记记录集合为非空时，所述方法还包括：当所述HTML页面被缩放时，返回步骤B1。
6.一种HTML图像上添加、显示标记的装置，其特征在于，包括：
第一获取模块，用于当浏览器打开HTML页面时，获取对应HTML页面中图像的标记记录集合；
第二获取模块，用于当所述第一获取模块获取的标记记录集合为空时，获取鼠标在所述图像上的点击位置；
添加模块，用于在所述第二获取模块获取的点击位置处添加标记；
生成保存模块，用于生成与所述添加模块添加的标记对应的标记记录并保存；
第一显示模块，用于当所述第一获取模块获取的标记记录集合为非空时，根据所述第一获取模块获取的标记记录集合中含有的标记记录在所述图像中显示对应的标记；
第三获取模块，用于在所述第一显示模块显示标记之后，获取鼠标在所述图像上的点击位置；
所述添加模块，还用于当所述第三获取模块获取的点击位置为无标记处时，在所述第三获取模块获取的点击位置处添加标记；
第二显示模块，用于当所述第三获取模块获取的点击位置为有标记处时，显示对应标记的详细信息。
7.根据权利要求6所述的装置，其特征在于，
所述第一获取模块具体用于：通过异步请求在服务器或者数据库中获取对应HTML页面中图像的标记记录集合；
所述生成保存模块具体用于：生成对应的标记记录，并通过所述异步请求将生成的标记记录保存至所述服务器或者数据库中。
8.根据权利要求6所述的装置，其特征在于，所述装置还包括：创建模块；
所述创建模块，用于在所述第一获取模块获取对应HTML页面中图像的标记记录集合之前，创建HTML文档对象模型；
所述创建模块，具体包括：第一创建子模块、第二创建子模块和第三创建子模块；
所述第一创建子模块，用于创建父容器，并设置所述父容器的显示样式；
所述第二创建子模块，用于创建所述父容器的第一子元素，并设置所述第一子元素的显示样式，所述第一子元素承载图像；
所述第三创建子模块，用于创建所述父容器的第二子元素，并设置所述第二子元素的显示样式，所述第二子元素承载所有标记，且所述第二子元素的堆叠顺序高于所述第一子元素；
所述生成保存模块，具体包括：第一获取子模块、第一计算子模块和保存子模块；
所述第一获取子模块，用于获取当前HTML页面下图像的尺寸、鼠标的点击位置相对于所述图像的偏移量、用户设置的标记的详细信息；
所述第一计算子模块，用于根据所述创建模块创建的HTML文档对象模型中各部分的显示样式、所述第一获取子模块获取的图像的尺寸及偏移量，计算添加的标记的比例尺；
所述保存子模块，用于保存所述第一计算子模块计算的比例尺及所述第一获取子模块获取的用户设置的标记的详细信息。
9.根据权利要求8所述的装置，其特征在于，所述第一显示模块具体包括：第二获取子模块、第二计算子模块和渲染子模块；
所述第二获取子模块，用于获取当前HTML页面下所述图像的尺寸；
所述第二计算子模块，用于根据所述第一获取模块获取的标记记录集合中含有的各比例尺及所述第二获取子模块获取的当前HTML页面下所述图像的尺寸，计算对应的各标记相对于所述图像的偏移量；
所述渲染子模块，用于将所述第二计算子模块得到的各标记相对于所述图像的偏移量作为所述第三创建子模块创建的第二元素的各子元素，将所述各子元素拼接成HTML字符串并渲染在所述图像中对应的位置。
10.根据权利要求9所述的装置，其特征在于，当所述第一获取模块获取到的标记记录集合为非空时，所述第二获取子模块，还用于当所述HTML页面被缩放时，获取当前HTML页面下所述图像的尺寸。
CN201810027637.8A 2018-01-11 2018-01-11 一种html图像上添加、显示标记的方法及装置 Pending CN108268626A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201810027637.8A CN108268626A (zh) 2018-01-11 2018-01-11 一种html图像上添加、显示标记的方法及装置

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201810027637.8A CN108268626A (zh) 2018-01-11 2018-01-11 一种html图像上添加、显示标记的方法及装置

Publications (1)

Publication Number Publication Date
CN108268626A true CN108268626A (zh) 2018-07-10

Family

ID=62775440

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201810027637.8A Pending CN108268626A (zh) 2018-01-11 2018-01-11 一种html图像上添加、显示标记的方法及装置

Country Status (1)

Country Link
CN (1) CN108268626A (zh)

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN110347956A (zh) * 2019-05-31 2019-10-18 江苏创智云智能科技有限公司 基于网络图片的推广方法及装置
CN110377777A (zh) * 2019-06-29 2019-10-25 苏州浪潮智能科技有限公司 一种基于深度学习的图片多重标注方法及装置
WO2020037561A1 (zh) * 2018-08-22 2020-02-27 深圳市欢太科技有限公司 一种图像速记方法、终端及计算机存储介质

Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103425690A (zh) * 2012-05-22 2013-12-04 湖南家工场网络技术有限公司 一种基于样式表的图片信息标注和展示方法
CN103870558A (zh) * 2012-03-29 2014-06-18 北京奇虎科技有限公司 页面渲染方法和遮罩层创建方法
CN106776939A (zh) * 2016-12-01 2017-05-31 山东师范大学 一种图像无损标注方法及系统

Patent Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103870558A (zh) * 2012-03-29 2014-06-18 北京奇虎科技有限公司 页面渲染方法和遮罩层创建方法
CN103425690A (zh) * 2012-05-22 2013-12-04 湖南家工场网络技术有限公司 一种基于样式表的图片信息标注和展示方法
CN106776939A (zh) * 2016-12-01 2017-05-31 山东师范大学 一种图像无损标注方法及系统

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
NOTICEVENGUS: "ZoomMarker一款用于图片滚动放大拖动，且可以添加标记的jQuery插件", 《HTTPS://GITHUB.COM/NOTICEVENGUS/ZOOMMARKER/TREE/FEA6ED7C6DAA154020E5CAF94DBE41AE111B3E87》 *

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2020037561A1 (zh) * 2018-08-22 2020-02-27 深圳市欢太科技有限公司 一种图像速记方法、终端及计算机存储介质
CN110347956A (zh) * 2019-05-31 2019-10-18 江苏创智云智能科技有限公司 基于网络图片的推广方法及装置
CN110377777A (zh) * 2019-06-29 2019-10-25 苏州浪潮智能科技有限公司 一种基于深度学习的图片多重标注方法及装置

Similar Documents

Publication Publication Date Title
CN103890727B (zh) Web浏览器中的Web应用和辅助设备的模拟、Web应用开发工具以及使用它们的方法
CN107885848B (zh) 基于web技术的网页截屏方法
CN103365862B (zh) 一种用于生成与页面对应的图片的方法与设备
US20120218273A1 (en) Dynamic typesetting method of display image
CN108268626A (zh) 一种html图像上添加、显示标记的方法及装置
CN103164443B (zh) 图片合并方法和装置
CN110392901A (zh) 电子书服务的提供方法及用于该方法的计算机程序
CN105335338B (zh) 一种电子文档转换方法及装置
CN103336794B (zh) 用于在目标页面中提供对应呈现信息的方法与设备
CN106648635B (zh) 跨平台的公式编辑与渲染方法及系统
CN106610829A (zh) 网页截图方法和装置
KR101950126B1 (ko) 수학공식 처리방법, 장치, 설비 및 컴퓨터 저장 매체
CN103425690A (zh) 一种基于样式表的图片信息标注和展示方法
CN104915186B (zh) 一种制作页面的方法和装置
CN109710258A (zh) 微信小程序界面生成的方法及装置
CN110378986A (zh) 一种习题演示动画生成方法、装置、电子设备和存储介质
CN103136259B (zh) 一种基于内容块标识处理网页内容的方法与设备
CN108399172A (zh) 一种矢量图的生成方法和装置
CN110765743A (zh) 用于数学公式在HTML中编辑显示和导出到Word文档中的系统
CN106648571A (zh) 一种用于校对应用界面的方法和装置
CN110413765A (zh) 一种海量数据集分析和展示的交互式系统及其方法
CN107038199A (zh) 一种绘图方法和装置
CN103902633B (zh) 一种生成poi的热区数据的方法及其装置、系统
US20170124120A1 (en) Information processing system, information processing method, and information processing program
JP2023010805A (ja) ドキュメント情報抽出モデルのトレーニングおよびドキュメント情報の抽出のための方法、装置、電子機器、記憶媒体並びにコンピュータプログラム

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
RJ01 Rejection of invention patent application after publication

Application publication date: 20180710

RJ01 Rejection of invention patent application after publication