网页中文档的标注方法、系统及电子设备与流程

本发明属于计算机技术领域，涉及一种标注方法及系统，特别是涉及一种网页中文档的标注方法、系统及电子设备。

背景技术：

标注是一种在文档中添加信息的技术。这个概念最开始是在纸质媒体中产生的，包括对关键词进行突出显示、添加旁注等。随着计算机及网络技术的迅猛发展及日渐普及，当前网络媒体已经成为人们了解信息的重要途径之一。在这种情况下，网页标注技术也得到了重视和发展，网页标注日渐成为包括数字图书馆、计算机辅助协同工作、信息共享及管理在内的多种领域内的热门话题之一。

传统的Web系统向内容或者信息的提供者提供了很方便的信息发布平台，比如网页制作平台。但是，这种信息交流的方式基本上是单向的。网页阅读者能够进行的交互仅仅限于点击链接或者添加书签等。

因此，如何提供一种网页中文档的标注方法、系统及电子设备，以解决现有技术在先预览网页文档的时候无法针对文档进行随意的标记的缺陷，实以成为本领域从业者亟待解决的技术问题。

技术实现要素：

鉴于以上所述现有技术的缺点，本发明的目的在于提供一种网页中文档的标注方法、系统及电子设备，用于解决现有技术中在先预览网页文档的时候无法针对文档进行随意的标记的问题。

为实现上述目的及其他相关目的，本发明一方面提供一种网页中文档的标注方法，其特征在于，应用于电子设备，所述网页中文档的标注方法包括以下步骤：监听所述电子设备的输入器于为所述网页添加的监听图层上的输入器操作事件；记录所述输入器操作事件在监听图层上所发生的位置坐标，并绘制成所述输入器操作事件的标注轨迹；将在所述监听图层上绘制的标注轨迹存储于与所述电子设备通信连接的服务器，待服务器接收到所述网页中文档的再次访问请求时，将保存于所述服务器上的标注轨迹再现于所述网页中的文档上。

于本发明的一实施例中，通过所述在页面内的超文本标记语言中添加一用以绘制图像的画布标签。

于本发明的一实施例中，所述画布标签为<canvas>标签。

于本发明的一实施例中，所述输入器操作事件包括操作所述输入器在所述监听图层上的开始事件，操作所述输入器在所述监听图层上的移动事件，及操作所述输入器在所述监听图层上的停止事件。

于本发明的一实施例中，所述记录所述输入器操作事件在监听图层上所发生的位置坐标的步骤包括：记录所述开始事件在监听图层上所发生的位置坐标；记录所述移动事件在监听图层上所发生的每一个位置坐标；记录所述停止事件在监听图层上所发生的位置坐标。

于本发明的一实施例中，所述绘制成所述输入器操作事件的标注轨迹的步骤为将所述开始事件在监听图层上所发生的位置坐标，所述移动事件在监听图层上所发生的每一个位置坐标，所述停止事件在监听图层上所发生的位置坐标连接在一起，以此绘制所述标注轨迹。

本发明另一方面提供一种网页中文档的标注系统，应用于电子设备，所述网页中文档的标注系统包括：监听模块，用于监听所述电子设备的输入器于为所述网页添加的监听图层上的输入器操作事件；处理模块，用于记录所述输入器操作事件在监听图层上所发生的位置坐标，并绘制成所述输入器操作事件的标注轨迹；管理模块，用于将在所述监听图层上绘制的标注轨迹存储于与所述电子设备通信连接的服务器，待服务器接收到所述网页中文档的再次访问请求时，将保存于所述服务器上的标注轨迹再现于所述网页中的文档上。

于本发明的一实施例中，所述输入器操作事件包括操作所述输入器在所述监听图层上的开始事件，操作所述输入器在所述监听图层上的移动事件，及操作所述输入器在所述监听图层上的停止事件；所述处理模块用于记录所述开始事件在监听图层上所发生的位置坐标，记录所述移动事件在监听图层上所发生的每一个位置坐标，记录所述停止事件在监听图层上所发生的位置坐标。

于本发明的一实施例中，所述处理模块还用于将所述开始事件在监听图层上所发生的位置坐标，所述移动事件在监听图层上所发生的每一个位置坐标，所述停止事件在监听图层上所发生的位置坐标连接在一起，以此绘制所述标注轨迹。

本发明又一方面提供一种电子设备，所述电子设备包括所述的网页中文档的标注系统。

如上所述，本发明的网页中文档的标注方法、系统及电子设备，具有以下有益效果：

本发明所述的网页中文档的标注方法、系统及电子设备通过canvas来实现文档预览的标注，可以在线预览时使载入的网页和画板一样，随意书写和标记。

附图说明

图1显示为本发明的网页中文档的标注方法于一实施例中的流程示意图。

图2显示为本发明的网页中文档的标注系统于一实施例中的原理结构示意图。

图3显示为本发明的电子设备于一实施例中的原理结构示意图。

元件标号说明

1 网页中文档的标注系统

11 响应模块

12 监听模块

13 处理模块

14 管理模块

2 电子设备

S1～S4 步骤

具体实施方式

以下通过特定的具体实例说明本发明的实施方式，本领域技术人员可由本说明书所揭露的内容轻易地了解本发明的其他优点与功效。本发明还可以通过另外不同的具体实施方式加以实施或应用，本说明书中的各项细节也可以基于不同观点与应用，在没有背离本发明的精神下进行各种修饰或改变。需说明的是，在不冲突的情况下，以下实施例及实施例中的特征可以相互组合。

需要说明的是，以下实施例中所提供的图示仅以示意方式说明本发明的基本构想，遂图式中仅显示与本发明中有关的组件而非按照实际实施时的组件数目、形状及尺寸绘制，其实际实施时各组件的型态、数量及比例可为一种随意的改变，且其组件布局型态也可能更为复杂。

本发明所述的网页中文档的标注方法、系统及电子设备的技术原理为：通过往文档预览页面添加canvas画布来实现针对于文档的批注，并且保存canvas画布内容来实现对于文档的标记功能。

实施例一

本实施例提供一种网页中文档的标注方法，网页中文档的标注方法，其特征在于，应用于电子设备，所述网页中文档的标注方法包括以下步骤：

监听所述电子设备的输入器于为所述网页添加的监听图层上的输入器操作事件；

记录所述输入器操作事件在监听图层上所发生的位置坐标，并绘制成所述输入器操作事件的标注轨迹；

将在所述监听图层上绘制的标注轨迹存储于与所述电子设备通信连接的服务器，待服务器接收到所述网页中文档的再次访问请求时，将保存于所述服务器上的标注轨迹再现于所述网页中的文档上。

以下将结合图示对本实施例所述的网页中文档的标注方法进行详细描述。本实施例所述的网页中文档的标注方法应用于电子设备中。所述电子设备包括显示屏和输入器。于实际的实现方式中，所述电子设备例如为手机、平板电脑、笔记本、台式电脑等电子设备。其中，所述显示屏在电子设备与用户之间同时提供输出接口和输入接口。显示屏控制器接收/发送来自/去显示屏的电信号。该显示屏则向用户显示可视输出。这个可视输出可以包括文本、图形、视频及其任意组合。某些或所有可视输出可与用户接口对象相对应，在下文中将对它的更多细节进行描述。输入器向电子设备输入数据和信息的设备，是电子设备与用户或其他设备通信的桥梁。输入器是用户和电子设备之间进行信息交换的主要装置之一，例如，键盘，鼠标，摄像头，扫描仪，光笔，手写输入板，游戏杆，语音输入装置等都属于输入器。于本实施例中，所述输入器为鼠标。

请参阅图1，显示为网页中文档的标注方法于一实施例中的流程示意图。如图1所示，所述网页中文档的标注方法具体包括以下几个步骤：

S1，响应于用户在电子设备上载入的当前网页上选择的文档作为被标注对象，记录当前网页所对应的url网址，并获取该网页页面对应的网页源代码(如HTML代码)，并在该网页源代码中添加一用以绘制图像的画布标签。例如，<canvas>标签，该标签用于在网页上绘制图形。在本实施例中，添加<canvas>标签的过程如下：

规定<canvas>标签的id、宽度和高度。例如，<canvas id＝"myCanvas"width＝"200"height＝"100"></canvas>。

由于绘制工作必须在JavaScript内部完成，因此，将JavaScript脚本嵌入在HTML中以便在浏览器操作的时候能通过JavaScript代码监听到输入器操作事件发生。

S2，监听所述电子设备的鼠标于为所述网页添加的监听图层，即本实施例中的画布图层上的鼠标操作事件。在本实施例中，所述鼠标操作事件包括操作所述鼠标在所述画布图层上的开始事件(即在canvas图层的鼠标按下)，操作所述鼠标在所述监听图层上的移动事件(即在canvas图层的鼠标移动)，及操作所述鼠标器在所述监听图层上的停止事件(即在canvas图层的鼠标松开)。在本实施例中，当监听到浏览器发生开始事件、移动事件、停止事件，就会通知JavaScript脚本。

S3，记录所述鼠标操作事件在监听图层上所发生的位置坐标，并绘制成所述输入器操作事件的标注轨迹。

具体地，记录所述开始事件在监听图层上所发生的位置坐标A₁(X₁，Y₁)；记录所述移动事件在监听图层上所发生的每一个位置坐标A₂(X₂，Y₂)，A₃(X₃，Y₃)，…，A_N-1(X_N-1，Y_N-1)；记录所述停止事件在监听图层上所发生的位置坐标A_N(X_N，Y_N)。

具体地，将所述开始事件在监听图层上所发生的位置坐标，所述移动事件在监听图层上所发生的每一个位置坐标，所述停止事件在监听图层上所发生的位置坐标连接在一起，以此绘制所述标注轨迹。在本实施例中，通过在JavaScript脚本预置标注图形来绘制所述标注轨迹。例如，标注图形为直线，弧线，填充，阴影，渐变，变换，转移，旋转，缩放中的一种或多种的组合。

在本实施例中，canvas画层上会出现记录了标注轨迹，即鼠标轨迹的图画。

S4，将在所述监听图层上绘制的标注轨迹存储于与所述电子设备通信连接的服务器，待服务器接收到所述网页中文档的再次访问请求时，将保存于所述服务器上的标注轨迹再现于所述网页中的文档上。在本实施例中，将在所述监听图层上绘制的标注轨迹变成一张图片，在服务器接收到所述网页中文档的再次访问请求时可以通过canvas载入图片来展示。

本实施例所述的网页中文档的标注方法通过canvas来实现文档预览的标注，可以在线预览时使载入的网页和画板一样，随意书写和标记。

实施例二

本实施例提供一种网页中文档的标注系统，应用于电子设备，所述网页中文档的标注系统包括：

监听模块，用于监听所述电子设备的输入器于为所述网页添加的监听图层上的输入器操作事件；

处理模块，用于记录所述输入器操作事件在监听图层上所发生的位置坐标，并绘制成所述输入器操作事件的标注轨迹；

管理模块，用于将在所述监听图层上绘制的标注轨迹存储于与所述电子设备通信连接的服务器，待服务器接收到所述网页中文档的再次访问请求时，将保存于所述服务器上的标注轨迹再现于所述网页中的文档上。

以下将结合图示对本实施例提供的网页中文档的标注系统进行详细描述。请参阅图2，显示为网页中文档的标注系统于一实施例的原理结构示意图。如图2所示，所述网页中文档的标注系统1包括：响应模块11、监听模块12、处理模块13、及管理模块14。

所述响应模块11用于响应于用户在电子设备上载入的当前网页上选择的文档作为被标注对象，记录当前网页所对应的url网址，并获取该网页页面对应的网页源代码(如HTML代码)，并在该网页源代码中添加一用以绘制图像的画布标签。

与所述响应模块11连接的监听模块12用于监听所述电子设备的鼠标于为所述网页添加的监听图层，即本实施例中的画布图层上的鼠标操作事件。在本实施例中，所述鼠标操作事件包括操作所述鼠标在所述画布图层上的开始事件(即在canvas图层的鼠标按下)，操作所述鼠标在所述监听图层上的移动事件(即在canvas图层的鼠标移动)，及操作所述鼠标器在所述监听图层上的停止事件(即在canvas图层的鼠标松开)。在本实施例中，当监听到浏览器发生开始事件、移动事件、停止事件，就会通知JavaScript脚本。

与所述监听模块12连接的处理模块13用于记录所述鼠标操作事件在监听图层上所发生的位置坐标，并绘制成所述输入器操作事件的标注轨迹。在本实施例中，所述处理模块13具体用于记录所述开始事件在监听图层上所发生的位置坐标A₁(X₁，Y₁)；记录所述移动事件在监听图层上所发生的每一个位置坐标A₂(X₂，Y₂)，A₃(X₃，Y₃)，…，A_N-1(X_N-1，Y_N-1)；记录所述停止事件在监听图层上所发生的位置坐标A_N(X_N，Y_N)。所述处理模块13还用于将所述开始事件在监听图层上所发生的位置坐标，所述移动事件在监听图层上所发生的每一个位置坐标，所述停止事件在监听图层上所发生的位置坐标连接在一起，以此绘制所述标注轨迹。在本实施例中，通过在JavaScript脚本预置标注图形来绘制所述标注轨迹。例如，标注图形为直线，弧线，填充，阴影，渐变，变换，转移，旋转，缩放中的一种或多种的组合。

与所述处理模块13连接的管理模块14用于将在所述监听图层上绘制的标注轨迹存储于与所述电子设备通信连接的服务器，待服务器接收到所述网页中文档的再次访问请求时，将保存于所述服务器上的标注轨迹再现于所述网页中的文档上。在本实施例中，将在所述监听图层上绘制的标注轨迹变成一张图片，在服务器接收到所述网页中文档的再次访问请求时可以通过canvas载入图片来展示。

本实施例还包括一种电子设备2，请参阅图3，显示为电子设备于一实施例中的原理结构示意图。如图3所示，所述电子设备2包括上述网页中文档的标注系统1。

综上所述，本发明所述的网页中文档的标注方法、系统及电子设备通过canvas来实现文档预览的标注，可以在线预览时使载入的网页和画板一样，随意书写和标记。所以，本发明有效克服了现有技术中的种种缺点而具高度产业利用价值。

上述实施例仅例示性说明本发明的原理及其功效，而非用于限制本发明。任何熟悉此技术的人士皆可在不违背本发明的精神及范畴下，对上述实施例进行修饰或改变。因此，举凡所属技术领域中具有通常知识者在未脱离本发明所揭示的精神与技术思想下所完成的一切等效修饰或改变，仍应由本发明的权利要求所涵盖。