CN103678685A - 一种网页标注方法及装置 - Google Patents

Abstract

本发明实施例公开了一种网页标注方法及装置。其中，所述方法包括：通过网页服务器加载第一网页；为所述第一网页加载标注矢量图层；接收用户对所述第一网页进行标注所产生的第一网页标注数据，将所述第一网页标注数据转换为标注矢量数据，并将所述标注矢量数据绘制到所述标注矢量图层；将绘制所述标注矢量数据之后的标注矢量图层与所述第一网页进行叠加，以实现在所述第一网页上显示所述第一网页标注数据。本发明实施例能够提高网页标注中矢量编辑的性能。

Description

一种网页标注方法及装置

技术领域

本发明涉及计算机技术领域，特别是涉及一种网页标注方法及装置。

背景技术

人们在阅读电子文档时，有时会需要在文档上标注一些图形化信息以辅助阅读，例如，用鼠标绘制线条以勾勒出重点字句，或者在任意地方添加阅读见解或心得等。在Adobe Acrobat Reader或者CAJ Viewer等电子文档阅读器中，提供了高效的矢量图形编辑功能供用户对文档进行标注。然而，当前的网页浏览器在实现网页文档的标注功能时，存在着矢量图形编辑性能较低以及标注数据不能本地存储这两个问题。

当前的网页浏览器遵循HTML4.0.1规范，采用SVG（Scalable Vector Graphics，可缩放矢量图形）元素来实现网页标注的矢量图形编辑功能。例如，当用户添加一个网页标注时，浏览器将在内部的DOM（Document Object Model，文档对象模型）树添加一个SVG节点，然后对DOM树重新进行布局以计算SVG的大小和位置，最后再通过渲染引擎将网页标注绘制并显示出来，其过程如图1所示。在修改/删除网页标注的过程中，都需经历DOM树的修改及重新布局计算，尤其在实现手绘图形标注或者修改标注的大小和位置时，会频繁触发DOM计算，用户的每次细微操作都将导致大量的计算。同样。在浏览器渲染网页的过程中，DOM计算是最耗时的计算过程，占网页渲染计算量的50%以上。因此，当网页标注系统采用SVG实现矢量图形编辑时，其效率受限于DOM树及其计算的复杂度，在网页内容复杂或者庞大的情况下，将导致操作迟滞的性能问题。

可见，现有网页标注实现技术中矢量编辑性能低下。

发明内容

本发明实施例中提供了一种网页标注方法及装置，能够提高网页标注中矢量编辑的性能。

为了解决上述技术问题，本发明实施例公开了如下技术方案：

第一方面，提供一种网页标注方法，包括：

通过网页服务器加载第一网页；

为所述第一网页加载标注矢量图层；

接收用户对所述第一网页进行标注所产生的第一网页标注数据，将所述第一网页标注数据转换为标注矢量数据，并将所述标注矢量数据绘制到所述标注矢量图层；

将绘制所述标注矢量数据之后的标注矢量图层与所述第一网页进行叠加，以实现在所述第一网页上显示所述第一网页标注数据。

结合上述第一方面，在第一种可能的实现方式中，所述方法还包括：存储所述第一网页标注数据。

结合上述第一方面，在第二种可能的实现方式中，所述为所述第一网页加载标注矢量图层，包括：

将预先定义的矢量图形绘制对象标签加载于所述第一网页图层之上，所述标签的高度与所述第一网页的高度相等，且透明。

结合上述一方面，和第二种可能的实现方式，在第三种可能的实现方式中，所述将所述第一网页标注数据转换为标注矢量数据，包括：将所述第一网页标注数据转换为矢量图形绘制对象应用程序编程接口API进行调用。

结合上述一方面，和第一至第三种可能的实现方式，在第四种可能的实现方式中，所述存储所述第一网页标注数据，包括：

调用浏览器内置存储接口，将所述第一网页标注数据在浏览器进行本地存储，同时存储所述第一网页标注数据的特征值，所述第一特征值的存储形式为二元组（第一网页统一资源定位符URL，第一网页内容散列值）形式，所述第一特征值与所述第一网页标注数据一一对应。

结合上述一方面，和第四种可能的实现方式，在第五种可能的实现方式中，所述方法还包括：

当加载第二网页时，获取所述第二网页对应的第二URL与第二网页内容散列值；

当所述第二URL与所述第一URL相同，且所述第二网页内容散列值与所述第一网页内容散列值相同，则为所述第二网页加载所述第一网页标注数据；

当所述第二URL与所述第一URL相同且所述第二网页内容散列值与所述第一网页内容散列值不同，或所述第二URL与所述第一URL不同且所述第二网页内容散列值与所述第一网页内容散列值相同，则由用户选择是否加载所述第一网页标注数据；

当所述第二URL与所述第一URL不同，且所述第二网页内容散列值与所述第一网页内容散列值不同，则不加载所述第一网页标注数据。

第二方面，提供一种网页标注装置，包括：

网页加载模块，用于通过网页服务器加载第一网页；

标注矢量图层模块，用于为所述第一网页加载标注矢量图层；

标注数据处理模块，用于接收用户对所述第一网页进行标注所产生的第一网页标注数据，将所述第一网页标注数据转换为标注矢量数据，并将所述标注矢量数据绘制到所述标注矢量图层；

网页渲染模块，用于将绘制所述标注矢量数据之后的标注矢量图层与所述第一网页进行叠加，以实现在所述第一网页上显示所述第一网页标注数据。

结合上述第二方面，在第一种可能的实现方式中，还包括：存储模块，用于存储所述第一网页标注数据。

结合上述第二方面，在第二种可能的实现方式中，所述标注矢量图层模块的实现方式为：将预先定义的矢量图形绘制对象标签加载于所述第一网页图层之上，所述标签的高度与所述第一网页的高度相等，且透明。

结合上述第二方面，和第二种可能的实现方式，在第三种可能的实现方式中，所述标注数据处理模块，将所述第一网页标注数据转换为矢量图形绘制对象API进行调用。

结合上述第二方面，和第一至第三种可能的实现方式，在第四种可能的实现方式中，所述存储模块，包括：

第一存储单元，用于调用浏览器内置存储接口，将所述第一网页标注数据在浏览器进行本地存储；

第二存储单元，用于存储所述第一网页标注数据的特征值；所述第一特征值的存储形式为二元组（第一网页统一资源定位符URL，第一网页内容散列值）形式，所述第一特征值与所述第一网页标注数据一一对应。

结合上述第二方面，和第四种可能的实现方式，在第五种可能的实现方式中，还包括：

第二网页属性获取模块，用于当加载第二网页时，获取所述第二网页对应的第二URL与第二网页内容散列值；

判断模块，用于判断所述第二URL与所述第一URL是否相同，且所述第二网页内容散列值与所述第一网页内容散列值是否相同；

结果模块，用于当所述第二URL与所述第一URL相同，且所述第二网页内容散列值与所述第一网页内容散列值相同，则所述第二网页为所述第一网页，为所述第二网页加载所述第一网页标注数据；当所述第二URL与所述第一URL相同且所述第二网页内容散列值与所述第一网页内容散列值不同，或所述第二URL与所述第一URL不同且所述第二网页内容散列值与所述第一网页内容散列值相同，则由用户选择是否加载所述第一网页标注数据；当所述第二URL与所述第一URL不同，且所述第二网页内容散列值与所述第一网页内容散列值不同，则不加载所述第一网页标注数据。

本发明实施例中，当客户端浏览器上加载网页时，通过客户端浏览器为该网页单独创建一个标注矢量图层，当用户对该网页添加标注时，将针对该网页标注的数据转换为标注矢量数据，并将标注矢量数据绘制到标注矢量图层，进而，将绘制标注矢量数据之后的标注矢量图层与网页进行叠加，从而实现在网页上显示所述相应的网页标注数据，可见，不需要经过繁杂的DOM树计算操作，降低了网页标注编辑过程中的计算量，并且，不需要借助特定平台提供的矢量引擎，能够大大提高网页标注中矢量编辑的性能。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，对于本领域普通技术人员而言，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。

图1为现有技术中基于SVG实现网页标注的示意图；

图2为本发明提供的一个网页标注方法实施例的流程图；

图3为本发明提供的另一个网页标注方法实施例的流程图；

图4为本发明提供的基于Canvas规范进行矢量绘制的流程图；

图5为本发明提供的一种实现网页标注数据匹配的流程图；

图6为本发明提供的一个网页标注场景图；

图7为本发明提供的一个网页标注装置实施例结构示意图；

图8为本发明提供的另一个网页标注装置实施例结构示意图；

图9为本发明提供的又一个网页标注装置实施例结构示意图；

图10为本发明提供的一个网页标注装置场景示意图；

图11为本发明提供的一种基于计算机系统实现的网页标注装置。

具体实施方式

为了使本技术领域的人员更好地理解本发明实施例中的技术方案，并使本发明实施例的上述目的、特征和优点能够更加明显易懂，下面结合附图对本发明实施例中技术方案作进一步详细的说明。

首先，介绍本发明提供的一种网页标注方法。

参见图2，为本发明提供的一个网页标注方法实施例的流程，该业务处理流程具体可以包括：

步骤201、通过网页服务器加载第一网页。

该步骤中，客户端浏览器从网页服务器上下载网页，并将该网页加载在客户端浏览器上。此处，将该网页称为“第一网页”。

步骤202、为所述第一网页加载标注矢量图层。

该步骤中，标注矢量图层可以由客户端浏览器在初始化时创建，作为网页标注数据的绘制目标，叠加并显示到第一网页上。

本发明实施例中，利用支持HTML（HyperText Markup Language，超文本标记语言）矢量图形绘制规范的浏览器的内置功能，因此，不需要依赖外部特定平台提供的矢量引擎。

步骤203、接收用户对所述第一网页进行标注所产生的第一网页标注数据，将所述第一网页标注数据转换为标注矢量数据，并将所述标注矢量数据绘制到所述标注矢量图层。

该步骤中，用户通过客户端浏览器对所加载的第一网页执行标注操作，具体可以通过鼠标、手写笔等输入装置或者直接通过手指进行标注数据的编辑操作。

客户端浏览器响应用户在编辑标注时触发的具体事件，并记录用户的操作轨迹。例如，当用户需要通过手写笔在网页中的一行文字下面划一条线时，首先在线的起始处按下，此时，浏览器开始响应按下事件，并记录手写笔按下的起始位置；当用户在文字下面通过移动手写笔操作划出线条时，浏览器记录响应移动事件，并记录手写笔每次移动的位置；当手写笔移动到线的结束位置时，用户抬起手写笔，浏览器响应抬起事件，并记录手写笔抬起的位置。

浏览器将记录的操作轨迹数据转换为标注矢量数据，并将该标注矢量数据绘制到所述标注矢量图层。

当用户进行网页标注数据的添加、修改操作时，网页标注数据的格式可以是SVG、XML（Extensible Markup Language，可扩展标记语言）以及其他矢量数据格式。

步骤204、将绘制所述标注矢量数据之后的标注矢量图层与所述第一网页进行叠加，以实现在所述第一网页上显示所述第一网页标注数据。

该步骤中，通过将绘制所述标注矢量数据之后的标注矢量图层与所述第一网页进行叠加，实现在所述第一网页上显示所述第一网页标注数据。

本发明实施例中，当客户端浏览器上加载网页时，通过客户端浏览器为该网页单独创建一个标注矢量图层，当用户对该网页添加标注时，将针对该网页标注的数据转换为标注矢量数据，并将标注矢量数据绘制到标注矢量图层，进而，将绘制标注矢量数据之后的标注矢量图层与网页进行叠加，从而实现在网页上显示所述相应的网页标注数据，可见，不需要经过繁杂的DOM树计算操作，降低了网页标注编辑过程中的计算量，并且，不需要借助特定平台提供的矢量引擎，能够大大提高网页标注中矢量编辑的性能。

在本发明提供的另一个网页标注方法实施例中，如图3所示，还可以包括以下执行步骤：

步骤205、存储所述第一网页标注数据。

该步骤中，将所述第一网页标注数据进行存储，便于再次显示或查询该网页标注数据。

需要说明的是，本发明实施中，上述步骤202中为所述第一网页加载标注矢量图层的实现方式可以包括：

预先定义矢量图形绘制对象标签，将该标签加载于所述第一网页图层之上，所述标签的高度与所述第一网页的高度相等，且完全透明。

进一步，上述步骤203中将所述第一网页标注数据转换为标注矢量数据的实现方式可以包括：将所述第一网页标注数据转换为矢量图形绘制对象API（ApplicationProgramming Interface，应用程序编程接口）进行调用。

具体地，本发明实施例可以应用HTML5中的Canvas规范实现高性能且跨平台的矢量图形编辑功能。Canvas是HTML5中定义的一种矢量图形绘制规范，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法，其绘制原理如图4所示。在初始化Canvas对象时，浏览器将为该Canvas对象单独创建一个矢量图层，当用户添加标注时，不需要经过DOM树操作，而是直接将标注数据转换为标注矢量数据，并将该标注矢量数据绘制到矢量图层进行显示，由于无需经过复杂的DOM树计算操作，因此可以降低网页标注编辑过程中的计算量。同时，Canvas是支持HTML5规范的浏览器的内置功能，不需要依赖外部矢量引擎，从而实现了完全的跨平台部署。

在将标注数据转换为标注矢量数据的过程中，将标注数据转换为Canvas API之后进行调用，从而实现将标注数据绘制到标注矢量图层110上。具体绘制方法例如：

（1）初始化矢量图形绘制环境。例如：绘制二维矢量时，通过getContext方法来获得图形绘制环境。

（2）绘制基本图元。例如：绘制矩形时，可调用rect方法。

（3）绘制复杂图元。例如：绘制手绘图形时，首先通过记录用户操作轨迹获得构成手绘图形的一系列点的坐标，然后通过组合调用beginPath、moveTo、lineTo和closePath等方法将这些点依次连接为手绘图形。

（4）设置图元属性。例如：调用color方法设置填充颜色。

（5）实现图元的缩放、旋转和平移。例如：调用scale方法实现图元缩放。

（6）绘制图片。例如：调用drawImage方法实现图片的绘制。

（7）清空图元。例如：调用clearRect方法清空指定区域的图元。

需要说明的是，本发明实施例中，基于Web Storage规范实现标注数据的本地存储功能。

现有技术中，网页标注数据通常需要与网页分开存储。在HTML4.0.1规范中采用的本地存储机制为Cookie，其存储容量不超过4KB，通常无法满足标注数据的存储需求。因此，现有的网页标注系统需要专门为标注数据构建一个远程存储系统，用于保存和读取网页标注数据。这种方法不仅增加了网页标注系统的复杂性，而且使网页标注功能在离线情况下无法使用。

为了避免现有将网页标注数据进行远程存储的缺陷，本发明实施例中，将网页标注数据通过浏览器的内置接口存储在客户端本地，从而去除远程存储系统，由于是本地存储，因此，可以实现标注功能在离线情况下仍可使用。

具体地，调用浏览器内置存储接口，将所述第一网页标注数据在浏览器进行本地存储，同时存储所述第一网页标注数据的特征值，所述第一特征值的存储形式为二元组（第一URL（Uniform Resource Locator，网页统一资源定位符），第一网页内容散列值）形式，所述第一特征值与所述第一网页标注数据一一对应。其中，网页内容散列值是对网页文件数据应用标准的散列算法计算得到的数值。

本地存储规范实现不局限于HTML5中定义的网页存储（Web Storage）规范，还可以包括：网页SQL数据库（Web SQL Database）、索引数据库（Indexed Database）等规范。

以Web Storage为例，Web Storage是HTML5中定义的一种采用（键，值）二元组形式的本地存储规范，其存储容量由浏览器自行指定，通常在5MB以上。例如：在浏览器Internet Explorer8中指定的存储空间为10MB，足以满足网页标注数据的存储需求。在采用Web Storage之后，将不再需要为标注数据构建远程存储系统。

虽然目前浏览器支持的标准规范为HTML4.0.1，且HTML5的正式规范计划在2022年才推出，但近年来越来越多的主流浏览器（例如：Internet Explorer、Chrome、Safari以及Opera等）均已开始支持Canvas以及Web Storage功能，因此本发明技术方案对当面主流浏览器均可适用。

当保存网页标注数据时，调用浏览器的内置Web Storage接口，将网页标注数据存储到浏览器本地存储中。在浏览器进行初始化的阶段，可以从浏览器本地存储中读取之前已经存储的网页标注数据，将之前已经存储的网页标注数据显示在当前网页上。具体地，通过调用本地存储接口（例如：set Item）将网页标注数据保存到浏览器本地存储；并且，通过调用本地存储接口（例如：get Item）从浏览器本地存储中读取之前已经存储的网页标注数据。

当浏览器上加载第二网页时，浏览器可以根据该第二网页的特征值，在本地存储中查找是否与该第二网页匹配的网页标注数据。如图5所示，具体实现流程包括：

步骤501、当加载第二网页时，获取所述第二网页对应的第二URL与第二网页内容散列值；

步骤502、判断所述第二URL与所述第一URL是否相同，且所述第二网页内容散列值与所述第一网页内容散列值是否相同；如果是，则执行步骤503；如果否，则分别执行步骤504～507；

步骤503、当所述第二URL与所述第一URL相同，且所述第二网页内容散列值与所述第一网页内容散列值相同，则所述第二网页为所述第一网页，为所述第二网页加载所述第一网页标注数据；

步骤504、当所述第二URL与所述第一URL相同且所述第二网页内容散列值与所述第一网页内容散列值不同，或所述第二URL与所述第一URL不同且所述第二网页内容散列值与所述第一网页内容散列值相同，则由用户选择是否加载所述第一网页标注数据；

步骤505、当所述第二URL与所述第一URL相同且所述第二网页内容散列值与所述第一网页内容散列值不同时，则提示用户网页内容已发生变化，由用户选择是否加载；

步骤506、当所述第二URL与所述第一URL不同且所述第二网页内容散列值与所述第一网页内容散列值相同时，则提示用户有可选的标注数据，由用户选择是否加载。

步骤507、当所述第二URL与所述第一URL不同，且所述第二网页内容散列值与所述第一网页内容散列值不同，则不加载所述第一网页标注数据。

为了便于对本发明技术方案的理解，下面通过具体应用场景，对本发明技术方案进行详细说明。

图6所示为本发明提供的一个网页标注场景，包括在网页上编辑和存储标注数据，具体包括：

步骤601、当客户端浏览器下载并打开网页后，网页标注系统开始进行初始化，创建标注矢量图层，加载并显示现有标注数据；

步骤602、由用户选择所要进行的网页标注操作类型；

该实施例中，操作类型可以分为“编辑网页标注数据”和“存储网页标注数据”两大类。只要用户选择一种操作类型，网页标注系统即进入网页标注编辑状态。

步骤603、网页标注系统判断用户所选择的操作类型，如果操作类型是编辑网页标注数据，则执行步骤604；如果操作类型是存储网页标注数据，则执行步骤612。

步骤604，根据用户编辑的起始位置（例如，鼠标按下时所处的位置）判断是否选中了某个网页标注，如果未选中任何标注，则执行步骤605；如果选中了一个现有的标注，则执行步骤609。

具体地，将编辑的起始位置与每个标注占据的区域进行比较，若位于某个标注占据的区域内，则确定为选中该区域内的网页标注；若未位于任何网页标注的区域内，则确定为未选中任何标注；若同时位于多个网页标注的区域内，则可以设置为确定选中这些标注中最后添加的标注。

步骤605、在该编辑位置上添加一个新的网页标注，并将该网页标注置为“选中”状态。

步骤606、记录用户的操作轨迹。

步骤607、根据用户的操作轨迹对选中的标注进行修改。

步骤608、将编辑完成的标注绘制在标注矢量图层上，转而执行步骤602。

步骤609、判断用户对选中的网页标注进行修改还是删除，如果用户选择“修改”该网页标注，则执行步骤606-608，之后，继续回到步骤602；如果用户选择“删除”该网页标注，则执行步骤610。

步骤610、删除用户选中的网页标注。

步骤611、将标注图形清空，继续执行步骤602。

步骤612、调用Web Storage接口，将网页标注数据存储到浏览器本地，继续执行步骤602。

与本发明提供的网页标注方法实施例相对应，本发明还提供了一种网页标注装置。

如图7所示，为本发明提供的一种网页标注装置的实施例，该设备具体可以包括：

网页加载模块701，用于通过网页服务器加载第一网页。

标注矢量图层模块702，用于为所述第一网页加载标注矢量图层。

其中，所述标注矢量图层可以由网页标注装置在初始化时创建，作为网页标注数据的绘制目标，叠加并显示到第一网页上。具体实施时，利用支持HTML（HyperText MarkupLanguage，超文本标记语言）矢量图形绘制规范的浏览器的内置功能，因此，不需要依赖外部特定平台提供的矢量引擎。

标注数据处理模块703，用于接收用户对所述第一网页进行标注所产生的第一网页标注数据，将所述第一网页标注数据转换为标注矢量数据，并将所述标注矢量数据绘制到所述标注矢量图层。

网页渲染模块704，用于将绘制所述标注矢量数据之后的标注矢量图层与所述第一网页进行叠加，以实现在所述第一网页上显示所述第一网页标注数据。

其中，用户通过网页标注装置对所加载的第一网页执行标注操作，具体可以通过鼠标、手写笔等输入装置或者直接通过手指进行标注数据的编辑操作。

当标注数据处理模块703接收到用户输入的编辑操作数据后，开始响应用户在编辑标注时触发的具体事件，并记录用户的操作轨迹。例如，当用户需要通过手写笔在网页中的一行文字下面划一条线时，首先在线的起始处按下，此时，浏览器开始响应按下事件，并记录手写笔按下的起始位置；当用户在文字下面通过移动手写笔操作划出线条时，浏览器记录响应移动事件，并记录手写笔每次移动的位置；当手写笔移动到线的结束位置时，用户抬起手写笔，浏览器响应抬起事件，并记录手写笔抬起的位置。

然后，标注数据处理模块703将记录的操作轨迹数据转换为标注矢量数据，并将该标注矢量数据绘制到所述标注矢量图层。

本发明实施例中，当网页标注装置上通过网页加载模块加载网页时，通过标注矢量图层模块为该网页单独创建一个标注矢量图层，当用户对该网页添加标注时，通过标注数据处理模块将针对该网页标注的数据转换为标注矢量数据，并将标注矢量数据绘制到标注矢量图层，进而，通过网页渲染模块将绘制标注矢量数据之后的标注矢量图层与网页进行叠加，从而实现在网页上显示所述相应的网页标注数据，可见，不需要经过繁杂的DOM树计算操作，降低了网页标注编辑过程中的计算量，并且，不需要借助特定平台提供的矢量引擎，能够大大提高网页标注中矢量编辑的性能。

如图8所示，在本发明提供的另一种网页标注装置的实施例中，该设备还可以包括：

存储模块705，用于存储所述第一网页标注数据。

通过将所述第一网页标注数据进行存储，便于再次显示或查询该网页标注数据。

具体实现过程中，所述标注矢量图层模块的实现方式可以为：将预先定义的矢量图形绘制对象标签加载于所述第一网页图层之上，所述标签的高度与所述第一网页的高度相等，且完全透明。

此外，所述标注数据处理模块，将所述第一网页标注数据转换为矢量图形绘制对象API进行调用，实现将所述第一网页标注数据转换为标注矢量数据。

具体地，本发明实施例可以应用HTML5中的Canvas规范实现高性能且跨平台的矢量图形编辑功能。在初始化Canvas对象时，为该Canvas对象单独创建一个矢量图层，当用户添加标注时，不需要经过DOM树操作，而是直接将标注数据转换为Canvas API之后进行调用，从而实现将标注数据绘制到标注矢量图层。

为了避免现有将网页标注数据进行远程存储的缺陷，本发明实施例中，将网页标注数据通过浏览器的内置接口存储在客户端本地。

在本发明的一个优选实施例中，所述存储模块，具体可以包括：

第一存储单元，用于调用浏览器内置存储接口，将所述第一网页标注数据在浏览器进行本地存储；

第二存储单元，用于存储所述第一网页标注数据的特征值；所述第一特征值的存储形式为二元组（第一网页统一资源定位符URL，第一网页内容散列值）形式，所述第一特征值与所述第一网页标注数据一一对应。

通过将网页标注数据通过浏览器的内置接口存储在客户端本地，从而去除远程存储系统，由于是本地存储，因此，可以实现标注功能在离线情况下仍可使用。

在本发明提供的另一个实施例中，如图9所示，所述网页标注装置，还包括：

第二网页属性获取模块706，用于当加载第二网页时，获取所述第二网页对应的第二URL与第二网页内容散列值；

判断模块707，用于判断所述第二URL与所述第一URL是否相同，且所述第二网页内容散列值与所述第一网页内容散列值是否相同；

结果模块708，用于当所述第二URL与所述第一URL相同，且所述第二网页内容散列值与所述第一网页内容散列值相同，则所述第二网页为所述第一网页，为所述第二网页加载所述第一网页标注数据；当所述第二URL与所述第一URL相同且所述第二网页内容散列值与所述第一网页内容散列值不同，或所述第二URL与所述第一URL不同且所述第二网页内容散列值与所述第一网页内容散列值相同，则由用户选择是否加载所述第一网页标注数据；当所述第二URL与所述第一URL不同，且所述第二网页内容散列值与所述第一网页内容散列值不同，则不加载所述第一网页标注数据。

下面通过图10所示一个具体实施例，说明通过网页标注装置实现网页标注的过程中各模块之间的协作过程。

网页标注装置1000可以访问网页服务器1001，其中，网页服务器1001负责发布网页1004，用户通过网页标注装置1000来阅读网页1004。网页标注装置包括网页标注引擎1002和浏览器引擎1003两部分，其中网页标注引擎1002实现网页标注的编辑和存储功能，浏览器引擎为网页标注装置1000的标准内置模块。

网页标注引擎1002由网页标注装置支持的脚本语言（例如，Javascript）编写，保存为网页标注脚本文件，随网页标注装置1000一起部署，由网页标注装置1000加载并执行。

网页标注引擎1002具体包括：工具条模块1005、标注编辑模块1006、标注数据模块1007、Canvas模块1008以及Web Storage模块1009；浏览器引擎1003具体包括：标注矢量图层模块1010、网页渲染模块1011以及浏览器本地存储模块1012。其中，标注编辑模块1006与标注数据模块1007构成了标注数据处理模块。

其中，工具条模块1005实现的功能为：在网页上显示为一个矩形区域，该区域中可以设置显示多个图标，每个图标表示一种编辑状态（例如：添加某种类型的网页标注）或一种动作（例如：保存网页标注）。用户通过点击工具条中的图标可以触发网页标注的编辑和保存。标注编辑模块1006实现的功能为：响应用户在编辑标注时触发的事件，记录用户的操作轨迹，并且可以根据用户的操作轨迹判断是否选中该区域中已有的网页标注。标注数据模块1007实现的功能为：接收标注编辑模块1006传输的用户操作轨迹，并根据当前的编辑状态和操作轨迹，进行网页标注数据的添加、修改或删除。Canvas模块1008实现的功能为：实现将网页标注数据转换为Canvas API调用，将网页标注数据输出至标注矢量图层模块1010。标注矢量图层模块1010可由网页标注装置1000初始化时创建，作为网页标注数据的绘制目标。网页渲染模块1011实现的功能为：实现网页的解析、渲染以及与标注矢量图层的叠加显示。Web Storage模块1009实现的功能为：提供网页标注装置1000本地存储的接口。浏览器本地存储模块1012设置在浏览器本地，提供本地存储空间。

当网页标注装置1000开启后，从网页服务器1001上下载网页1004（如S101所示）；用户在工具条模块1005中选择编辑操作的类型（S102），例如，“添加直线标注”或者“保存”等，并将所选类型传递给标注编辑模块1006，此外，工具条模块1005还可以控制标注矢量图层是否显示（S109）；用户通过手指或鼠标、手写笔等输入装置编辑网页标注时，标记编辑模块1006将记录的用户操作轨迹，并将所记录的轨迹数据传输至标注数据模块1007（S103）；标注数据模块1007接收用户的轨迹数据，根据该轨迹数据进行网页标注的编辑或删除，完成编辑之后，将网页标注数据传输至Canvas模块1008（S104）；在Canvas模块1008中，将网页标注数据转换为Canvas API进行调用，输出至标注矢量图层模块1010（S105）；标注矢量图层模块1010将标注矢量数据绘制到标注矢量图层，将完成绘制的矢量图层输出至网页渲染模块1011（S106），在网页渲染模块1011中实现网页标注矢量图层与网页进行叠加，以显示网页标注。

当需要存储网页标注时，标注数据模块1007触发Web Storage模块1009，通过调用Web Storage接口（S107），将编辑后的网页数据存储于浏览器本地存储模块1012对应的浏览器本地存储空间中（S108）。此外，可以通过触发Web Storage模块1009，访问浏览器本地存储模块1012，可以获取以存储的网页标注数据。

需要说明的是，上述图10所示实施例中，网页标注装置可以是客户端浏览器本身，也可以是客户端浏览器中的内置功能模块，本发明对此不做具体限制。

其中，图10所示实施例中，网页标注引擎内置于客户端浏览器内部。本发明实施例在具体实施过程中，网页标注引擎还可以部署在发布网页的网页服务器上，而不是随网页标注装置一起部署，通过在网页服务器发布的网页中插入网页标注引擎脚本文件的URL，由此，网页标注装置在下载网页的同时，将同时下载网页标注引擎脚本文件，从而可以在网页标注装置中执行网页标注引擎的相应动能。

本发明还提供了一种基于计算机系统实现的网页标注装置，例如：浏览器。如图11所示，具体实现中，本发明实施例的装置可以包括：处理器1101、存储器1102、总线1103和接收器1104；其中，所述处理器1101、存储器1102和接收器1104通过所述总线1103相互连接；所述存储器1102用于存储计算机执行指令；所述接收器用于接收用户对所述第一网页进行标注所产生的第一网页标注数据；所述处理器1101执行所述存储器1102存储的所述计算机执行指令，执行如下操作：通过网页服务器加载第一网页；为所述第一网页加载标注矢量图层；将所述第一网页标注数据转换为标注矢量数据，并将所述标注矢量数据绘制到所述标注矢量图层；将绘制所述标注矢量数据之后的标注矢量图层与所述第一网页进行叠加，以实现在所述第一网页上显示所述第一网页标注数据。

本发明实施例中，处理器可以是中央处理器（central processing unit,CPU）、专用集成电路（application-specific integrated circuit,ASIC）等。

计算机存储介质可存储有程序，该程序执行时可包括本发明实施例提供的数据传输的方法的各实施例中的部分或全部步骤。所述的存储介质可为磁碟、光盘、只读存储记忆体（Read-Only Memory，ROM）或随机存储记忆体（Random Access Memory，RAM）等。

本领域普通技术人员可以意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、或者计算机软件和电子硬件的结合来实现。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本发明的范围。

所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统、设备和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

在本申请所提供的几个实施例中，应该理解到，所揭露的系统、设备和方法，可以通过其它的方式实现。例如，以上所描述的设备实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，设备或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本发明各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。

所述功能如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备（可以是个人计算机，服务器，或者网络设备等）或处理器（processor）执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器（ROM，Read-Only Memory）、随机存取存储器（RAM，Random Access Memory）、磁碟或者光盘等各种可以存储程序代码的介质。

以上所述，仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应所述以权利要求的保护范围为准。

Claims (12)

1.一种网页标注方法，其特征在于，包括：

通过网页服务器加载第一网页；

为所述第一网页加载标注矢量图层；

接收用户对所述第一网页进行标注所产生的第一网页标注数据，将所述第一网页标注数据转换为标注矢量数据，并将所述标注矢量数据绘制到所述标注矢量图层；

将绘制所述标注矢量数据之后的标注矢量图层与所述第一网页进行叠加，以实现在所述第一网页上显示所述第一网页标注数据。

2.根据权利要求1所述的方法，其特征在于，还包括：

存储所述第一网页标注数据。

3.根据权利要求1所述的方法，其特征在于，所述为所述第一网页加载标注矢量图层，包括：

将预先定义的矢量图形绘制对象标签加载于所述第一网页图层之上，所述标签的高度与所述第一网页的高度相等，且透明。

4.根据权利要求3所述的方法，其特征在于，所述将所述第一网页标注数据转换为标注矢量数据，包括：

将所述第一网页标注数据转换为矢量图形绘制对象应用程序编程接口API进行调用。

5.根据权利要求1-4中任一项所述的方法，其特征在于，所述存储所述第一网页标注数据，包括：

调用浏览器内置存储接口，将所述第一网页标注数据在浏览器进行本地存储，同时存储所述第一网页标注数据的特征值，所述第一特征值的存储形式为二元组（第一网页统一资源定位符URL，第一网页内容散列值）形式，所述第一特征值与所述第一网页标注数据一一对应。

6.根据权利要求5所述的方法，其特征在于，还包括：

当加载第二网页时，获取所述第二网页对应的第二URL与第二网页内容散列值；

当所述第二URL与所述第一URL相同，且所述第二网页内容散列值与所述第一网页内容散列值相同，则为所述第二网页加载所述第一网页标注数据；

当所述第二URL与所述第一URL相同且所述第二网页内容散列值与所述第一网页内容散列值不同，或所述第二URL与所述第一URL不同且所述第二网页内容散列值与所述第一网页内容散列值相同，则由用户选择是否加载所述第一网页标注数据；

当所述第二URL与所述第一URL不同，且所述第二网页内容散列值与所述第一网页内容散列值不同，则不加载所述第一网页标注数据。

7.一种网页标注装置，其特征在于，包括：

网页加载模块，用于通过网页服务器加载第一网页；

标注矢量图层模块，用于为所述第一网页加载标注矢量图层；

标注数据处理模块，用于接收用户对所述第一网页进行标注所产生的第一网页标注数据，将所述第一网页标注数据转换为标注矢量数据，并将所述标注矢量数据绘制到所述标注矢量图层；

网页渲染模块，用于将绘制所述标注矢量数据之后的标注矢量图层与所述第一网页进行叠加，以实现在所述第一网页上显示所述第一网页标注数据。

8.根据权利要求7所述的装置，其特征在于，还包括：

存储模块，用于存储所述第一网页标注数据。

9.根据权利要求7所述的装置，其特征在于，所述标注矢量图层模块的实现方式为：将预先定义的矢量图形绘制对象标签加载于所述第一网页图层之上，所述标签的高度与所述第一网页的高度相等，且透明。

10.根据权利要求9所述的装置，其特征在于，所述标注数据处理模块，将所述第一网页标注数据转换为矢量图形绘制对象API进行调用。

11.根据权利要求7-10中任一项所述的装置，其特征在于，所述存储模块，包括：

第一存储单元，用于调用浏览器内置存储接口，将所述第一网页标注数据在浏览器进行本地存储；

第二存储单元，用于存储所述第一网页标注数据的特征值；所述第一特征值的存储形式为二元组（第一网页统一资源定位符URL，第一网页内容散列值）形式，所述第一特征值与所述第一网页标注数据一一对应。

12.根据权利要求11所述的装置，其特征在于，还包括：

第二网页属性获取模块，用于当加载第二网页时，获取所述第二网页对应的第二URL与第二网页内容散列值；

判断模块，用于判断所述第二URL与所述第一URL是否相同，且所述第二网页内容散列值与所述第一网页内容散列值是否相同；

结果模块，用于当所述第二URL与所述第一URL相同，且所述第二网页内容散列值与所述第一网页内容散列值相同，则所述第二网页为所述第一网页，为所述第二网页加载所述第一网页标注数据；当所述第二URL与所述第一URL相同且所述第二网页内容散列值与所述第一网页内容散列值不同，或所述第二URL与所述第一URL不同且所述第二网页内容散列值与所述第一网页内容散列值相同，则由用户选择是否加载所述第一网页标注数据；当所述第二URL与所述第一URL不同，且所述第二网页内容散列值与所述第一网页内容散列值不同，则不加载所述第一网页标注数据。

Images