CN110020279A - 页面数据处理方法、装置及存储介质 - Google Patents

Abstract

本申请公开了一种页面数据处理方法，包括：展示第一页面；其中，第一页面包含页面图片，所述页面图片中包含一个或多个内容元素；响应于对于第一页面的第一UI操作，确定第一UI操作的类型和第一位置信息；将第一位置信息转换成第二位置信息；根据第二位置信息在第一页面的排版数据结构中查找选中的第一内容元素；其中，排版数据结构描述了页面图片中每一个内容元素的位置信息以及各内容元素之间的关联关系，当第二位置信息属于一个内容元素的位置信息对应的区域时，确定该内容元素为选中的第一内容元素；在页面图片中绘制位于第一内容元素附近的操作选项或者根据第一内容元素对应的链接地址跳转到第二页面。本申请还公开了相应的装置。

Description

页面数据处理方法、装置及存储介质

技术领域

本申请涉及互联网领域，尤其涉及页面数据处理方法、装置及存储介质。

背景技术

目前，一些应用客户端能够提供页面内容浏览服务，比如各种小说阅读器应用客户端、新闻客户端等能够提供内容浏览服务的客户端。这种应用客户端也为用户提供了一些交互功能，比如为内容元素加标注、选择内容元素、点击内容元素携带的链接地址而跳转页面等功能。这里，内容元素包括：图片、文本栏、文本段、文本行、文本单词等等。

发明内容

本申请实例提供了一种页面数据处理方法，包括：展示第一页面；其中，所述第一页面包含页面图片，所述页面图片中包含一个或多个内容元素；响应于对于所述第一页面的第一用户界面(UI)操作，确定所述第一UI操作的类型和第一位置信息；其中，所述第一位置信息为UI坐标系中的位置信息；将所述第一位置信息转换成所述页面图片的坐标系中的第二位置信息；根据所述第二位置信息，在所述第一页面的排版数据结构中查找选中的第一内容元素；其中，所述排版数据结构描述了所述页面图片中每一个内容元素在所述页面图片的坐标系中的位置信息以及各内容元素之间的关联关系，当所述第二位置信息属于一个内容元素的所述位置信息对应的区域时，确定该内容元素为选中的第一内容元素；及根据所述UI操作的类型，在所述页面图片中绘制位于所述第一内容元素附近的操作选项或者根据所述第一内容元素对应的链接地址跳转到第二页面。

本申请实例提供了一种页面数据处理装置，包括：UI处理模块、页面绘制模块、页面跳转模块、查找模块、排版结构模块；其中，所述页面绘制模块，展示第一页面；其中，所述第一页面包含页面图片，所述页面图片中包含一个或多个内容元素；所述UI处理模块，响应于对于所述第一页面的第一UI操作，确定所述第一UI操作的类型和第一位置信息；其中，所述第一位置信息为UI坐标系中的位置信息；将所述第一位置信息转换成所述页面图片的坐标系中的第二位置信息；所述查找模块，根据所述第二位置信息，在所述排版结构模块保存的所述第一页面的排版数据结构中查找选中的第一内容元素；其中，所述排版数据结构描述了所述页面图片中每一个内容元素在所述页面图片的坐标系中的位置信息以及各内容元素之间的关联关系，当所述第二位置信息属于一个内容元素的所述位置信息对应的区域时，确定该内容元素为选中的第一内容元素；及所述查找模块，根据所述UI操作的类型，令所述页面绘制模块在所述页面图片中绘制位于所述第一内容元素附近的操作选项或者令所述页面跳转模块根据所述第一内容元素对应的链接地址跳转到第二页面。

本申请实例提供了一种存储介质，存储有数据处理程序，该数据处理程序用于使计算机执行如上所述的方法。

采用本申请提出的上述技术方案，能够改善页面操作处理效率。

附图说明

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

图1是本申请涉及的一种系统构架示意图；

图2是本申请一实例的方法流程图；

图3是本申请一实例的坐标关系示意图；

图4为本申请一实例的排版数据结构的树形结构示意图；

图5是本申请一实例的遍历排版数据结构的处理流程图；

图6是本申请一实例的装置组成结构图；

图7是本申请一实例的消息交互图；

图8是本申请一实例的消息交互图；

图9A～9G是本申请一实例的用户界面示意图；及

图10是本申请一实例的设备结构图。

具体实施方式

下面将结合本申请实例中的附图，对本申请实例中的技术方案进行清楚、完整地描述，显然，所描述的实例仅是本申请一部分实例，而不是全部的实例。基于本申请中的实例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实例，都属于本申请保护的范围。

本申请提出了页面数据处理方法，该方法可应用于图1所示的系统构架中。如图1所示，该系统构架包括：应用客户端101、提供内容服务的应用服务器102，二者通过互联网103进行通信。

用户使用应用客户端101访问应用服务器102，比如阅读各种小说、文章、新闻评论等内容。应用服务器102可以是提供各种内容服务的网站服务器，比如：门户网站服务器、提供在线阅读器服务的服务器、社交平台的服务器等等，比如：QQ阅读器服务器、新闻服务器、豆瓣服务器、文库服务器(如百度文库)。相应的，应用客户端101可以是诸如QQ阅读器客户端、新闻客户端、豆瓣客户端、文库客户端等。

在一些实例中，为了实现用户对页面的用户界面(UI)交互功能，在页面中创建了大量控件窗体，比如：每个文本行对应一个或多个文本控件，标准是看这个文本行中对应的内容的属性(如颜色、字体、下划线、删除线、粗体、斜体等)是否相同，如果不同就需要多个文本控件，一个图片对应一个图像控件，由控件窗体来执行UI操作每个图片对应一个图像控件，在可点击链接地址的地方加上一个不可见按钮。这样，当用户进行UI操作的时候，通过UI操作选中的控件窗体完成相应的交互功能。

本申请的发明人在研究中发现，上述技术方案主要有以下几个弊端：

1、一个展示页面上多段的文本需要加上大量的控件窗体，每个控件窗体的新建都会带来大量的开销，极易造成卡顿；

2、做选中状态和标注的时候都是直接加入线条控件窗体和背景控件窗体到选中文本上，频繁的这些操作的时候也会造成执行不流畅。

总之，上述方案是基于控件窗体的，大量控件窗体的操作会占用大量处理资源，从而严重影响系统性能，影响用户体验，甚至造成系统崩溃而死机或自动关闭程序。

在一些实例中，提出了一种页面数据处理方法，可应用于上述的应用客户端101。如图2所示，该方法包括如下处理：

步骤201：应用客户端101展示第一页面；其中，此第一页面包含页面图片，此页面图片中包含一个或多个内容元素。

这里，应用客户端101在展示一个页面时，可以将所有的内容元素渲染在一张页面图片中。这些内容元素可以包括：文本栏、图片、文本段、文本行、文本单词等等。

步骤202：应用客户端101响应于对于第一页面的第一UI操作，确定此第一UI操作的类型和第一位置信息；其中，第一位置信息为UI坐标系中的位置信息。

这里，第一UI操作可以是单击、拖动、多次连续点击、滑动、长按等操作，应用客户端101中的UI处理模块可以实时监听各种UI操作事件，进而可以确定用户是否对第一页面执行了UI操作以及UI操作的类型(也称为UI操作事件的类型)。其中，用户在执行UI操作时，是针对终端设备的屏幕所展示的UI视图进行的，应用客户端101中的UI处理模块首先可以获得UI操作在UI视图的坐标系中的位置坐标，此UI视图的坐标系可称为UI坐标系。

步骤203：应用客户端101将所述第一位置信息转换成此页面图片的坐标系中的第二位置信息。

上述页面图片的坐标系是与UI坐标系不同的，在此实例中，可根据预先配置的这两个坐标系之间的转换规则将UI操作在UI坐标系中的位置坐标(第一位置信息)转换成页面图片的坐标系中的位置坐标(第二位置信息)。

如图3所示，UI视图301的坐标系为xOy，页面图片302的坐标系为x’O’y’。当用户对UI视图中的点303执行了UI操作，则可首先获得点303在坐标系xOy中的坐标，之后再将其转换成坐标系x’O’y’中的坐标。

步骤204：应用客户端101根据第二位置信息，在第一页面的排版数据结构中查找选中的第一内容元素。

其中，此排版数据结构描述了第一页面的页面图片中每一个内容元素在此页面图片的坐标系中的位置信息以及各内容元素之间的关联关系，当第二位置信息属于一个内容元素的位置信息对应的区域时，确定该内容元素为选中的第一内容元素。

在一些实例中，上述排版数据结构描述的一个内容元素在页面图片的坐标系中的位置信息，包括：该内容元素左上顶点的位置坐标、面积参数(如该内容元素的尺寸信息，例如高和宽)。这样，根据此左上顶点的位置坐标和面积参数就能确定该内容元素在页面图片的坐标系中覆盖的区域。上述步骤203获得的第一UI操作的第二位置信息可以是在页面图片的坐标系中UI操作点的位置坐标，这样，使用该UI操作点的位置坐标与排版数据结构中各个内容元素的位置信息进行匹配，就能确定该UI操作点的位置坐标属于哪个内容元素覆盖的区域(即第二位置信息属于哪个内容元素的位置信息对应的区域)，进而能够确定该第一UI操作是对哪个内容元素进行的操作，该内容元素就是选中的第一内容元素。比如：如果确定当前UI操作的操作点属于某个文本单词覆盖的区域，则可确定该文本单词为选中的第一内容元素。

步骤205：应用客户端101根据步骤202确定的UI操作的类型，在上述页面图片中绘制位于此第一内容元素附近的操作选项或者根据此第一内容元素对应的链接地址跳转到第二页面。

在一些实例中，当UI操作为长按操作时，可在选中的第一内容元素附近绘制一个操作选项，以提示用户进一步选择要执行的操作选项(比如：添加标注、加笔记、分享等等)；当UI操作为点击操作时，可根据该第一内容元素对应的链接地址(如URL、超链接等)跳转到其它页面。这里，有些内容元素可以关联链接地址，比如：图片、标题/目录文本等，此链接地址可以记录在上述排版数据结构中，通过查询词排版数据结构可以获得内容元素对应的链接地址。

在一些实例中，当绘制了上述操作选项时，还可进一步在选中的第一内容元素上绘制用于选择内容元素的UI控件，用户通过拖动该UI控件的一端可以选择出第二内容元素，进而能够确定用户所选中的一组从第一内容元素开始到第二内容元素结束的内容元素，再根据用户选择的操作选项对这组内容元素进行相应的处理。具体实现过程详见后续实例。

上述实例中，页面中的各个内容元素是渲染在一张页面图片中的，应用客户端不必针对一个页面维护大量的控件窗体，通过一个排版数据结构就能够确定用户选中的内容元素，进而能方便快捷地实现页面中的UI操作。

在一些实例中，上述排版数据结构了进一步描述上述一个或多个内容元素构成的树形结构，其中，一个结点代表一个内容元素，两个结点之间的链接代表这两个结点代表的两个内容元素之间的从属关系；其中，所述在所述第一页面的排版数据结构中查找选中的第一内容元素包括：从根结点开始逐层遍历所述树形结构中的各个结点，直到确定一个叶子结点代表的内容元素为选中的第一内容元素，其中，当所述第二位置信息属于一个叶子结点代表的内容元素的所述位置信息对应的区域时，确定该叶子结点代表的该内容元素为选中的第一内容元素。

如图4所示，上述排版数据结构可以描述这样一种树形结构，其包括五层，第一层为根结点，页面对象(对应一个页面)，第二层包括若干文本栏对象(每个文本栏对象对应一个文本栏)和若干图片对象(每个图片对象对应一个图片)，第三层包括若干文本段对象(每一个文本段对象对应一个文本段，且从属于一个文本栏对象)，第四层包括若干文本行对象，第五层包括若干文本单词对象，其中，每一个文本行对象对应一个文本行，且从属于一个文本段对象，每一个文本单词对象对应一个文本单词(比如一个文中字、一个中文词、或者一个英文词/词组等等)，且从属于一个文本行对象。在步骤204中，可以从根结点(即第一层的页面对象)逐层遍历该树形结构，直到找到一个叶子结点代表的内容元素为选中的第一内容元素。其中，当确定某一层中的某个对象的位置信息对应的区域覆盖当前UI操作的位置信息时，如果该对象并非叶子结点，则开始遍历下一层中该对象的各个子结点，直到确定下一层中该对象的某个子结点的位置信息对应的区域覆盖当前UI操作的位置信息，如果该对象为叶子结点，则确定该对象代表的内容元素为选中的第一内容元素。

在一些实例中，从属于同一结点的各个子结点的信息(标识、位置信息等)可以维护在一个列表或者队列中，可以依次读取该列表或者队列中的各子结点的信息来实现上述遍历过程。具体处理流程可如图5所示，包括如下处理：

步骤501：获取UI点击位置坐标，即步骤203中的第二位置信息。根据该UI点击位置坐标在排版数据结构中查询匹配的内容元素(文本单词或者图片)。

步骤502：从当前页面对象对应的文本栏列表中取一个文本栏对象。

步骤503：根据UI点击位置坐标判断当前UI操作的点击点是否在当前所取的文本栏对象代表的文本栏内(即判断UI点击位置坐标是否属于文本栏对象对应的位置区域)，如果是，则执行步骤504；否则执行步骤505。这里，根据前述，可以根据UI点击位置坐标和排版数据结构中描述的各对象的位置信息确定该UI点击位置坐标是否属于某个对象对应的位置区域。

步骤504：从当前文本栏对象对应的文本段列表中取一个文本段对象，执行步骤506。

步骤505：判断是否已到文本栏列表的队尾(即是否已遍历完该列表中的文本栏对象)，如果是，则执行步骤514；否则返回步骤502。

步骤506：根据UI点击位置坐标判断当前UI操作的点击点是否在当前所取的文本段对象代表的文本段内(即判断UI点击位置坐标是否属于文本段对象对应的位置区域)，如果是，则执行步骤507；否则执行步骤508。

步骤507：从当前文本段对象对应的文本行列表中取一个文本行对象，执行步骤509。

步骤508：判断是否已到文本段列表的队尾(即是否已遍历完该列表中的文本段对象)，如果是，则执行步骤505；否则返回步骤504。

步骤509：根据UI点击位置坐标判断当前UI操作的点击点是否在当前所取的文本行对象代表的文本行内(即判断UI点击位置坐标是否属于文本行对象对应的位置区域)，如果是，则执行步骤510；否则执行步骤511。

步骤510：从当前文本行对象对应的文本单词列表中取一个文本单词对象，执行步骤512。

步骤511：判断是否已到文本行列表的队尾(即是否已遍历完该列表中的文本行对象)，如果是，则执行步骤508；否则返回步骤507。

步骤512：根据UI点击位置坐标判断当前UI操作的点击点是否在当前所取的文本单词对象代表的文本单词内(即判断UI点击位置坐标是否属于文本单词对象对应的位置区域)，如果是，则结束当前流程；否则执行步骤513。

步骤513：判断是否已到文本单词列表的队尾(即是否已遍历完该列表中的文本单词对象)，如果是，则执行步骤511；否则返回步骤510。

步骤514：从当前页面对象对应的图片列表中取一个图片对象，执行步骤515。

步骤515：根据UI点击位置坐标判断当前UI操作的点击点是否在当前所取的图片对象代表的图片内(即判断UI点击位置坐标是否属于图片对象对应的位置区域)，如果是，则结束当前流程；否则执行步骤516。

步骤516：判断是否已到图片列表的队尾(即是否已遍历完该列表中的图片对象)，如果是，则结束当前流程；否则返回步骤514。

在以上实例中，通过树形结构的排版数据结构能够逐层遍历各个内容元素，进而能快速、高效的确定当前UI操作的位置(点击点位置)所在的内容元素(文本单词或图片)，且不必占用大量系统处理资源，能够进一步改善系统性能。

在一些实例中，当绘制位于该选中的第一内容元素附近的操作选项之后，所述方法进一步包括如下步骤：

1、响应于对于所述第一页面的第二UI操作，执行如下处理：

确定所述第二UI操作的第三位置信息；其中，所述第三位置信息为所述UI坐标系中的位置信息；

将所述第三位置信息转换成所述页面图片的坐标系中的第四位置信息；及

根据所述第四位置信息，在所述排版数据结构中查找选中的第二内容元素；其中，当所述第四位置信息属于一个内容元素的所述位置信息对应的区域时，确定该内容元素为选中的第二内容元素。

2、响应于对任一操作选项的选择操作，根据所选择的该操作选项对所述选中的第一内容元素或者一组选中的内容元素执行相应的处理(如：添加标注、加笔记、分享、搜索等等)，其中，所述一组选中的内容元素为根据所述排版数据结构描述的各内容元素之间的关联关系而确定的一组从所述第一内容元素开始到所述第二内容元素结束的内容元素。

其中，上述第二UI操作不一定会产生，也就是说不一定会有选中的第二内容元素。如果接收到了第二UI操作并确定了第二内容元素，则可对一组从所述第一内容元素开始到所述第二内容元素结束的内容元素执行处理。如果未收到第二UI操作，则可对第一内容元素执行处理。上述根据所述第四位置信息，在所述排版数据结构中查找选中的第二内容元素的具体方法与步骤204中查找第一内容元素的方法相同，这里不再赘述。

图9A示出了小说阅读器的首页，用户点击图标“小说3”901之后，可以打开图9B所示的小说正文页面。当用户长按图9B所示页面中的点912时，阅读器应用客户端可根据前述方法确定选中的第一内容元素(如一个中文字)，之后，如图9C所示，在此内容元素902附近绘制操作选项903～908同时还在选中的第一内容元素902上绘制一个用于选择文本的UI控件。

进一步的，如果用户拖动第一内容元素902上的UI控件(即执行第二UI操作)，则可如图9D所示，确定选中的第二内容元素909。这样，该UI控件覆盖的，从第一内容元素902开始到第二内容元素909结束的一组内容元素即为当前选中的文本。

在一些实例中，当所选择的操作选项为添加标注时，对所述选中的第一内容元素或者一组选中的内容元素执行添加标注的处理；其中，对所述选中的第一内容元素执行的所述添加标注的处理，包括：根据所述排版数据结构描述的所述第一内容元素的位置信息，在所述页面图片中绘制所述第一内容元素的标注；其中，对所述一组选中的内容元素执行的所述添加标注的处理，包括：根据所述排版数据结构描述的所述第一内容元素和所述第二内容元素的位置信息，在所述页面图片中绘制所述一组选中的内容元素的标注。这里，所谓绘制标注，可以给选中的一个或多个内容元素绘制下划线，或者给选中的一个或多个内容元素绘制高亮标注。

如图9D所示，当用户点击了操作选项“高亮”903(即添加标注的操作选项)时，则可以在当前选中的文本下绘制标注，如图9E所示，从第一内容元素902开始到第二内容元素909结束的下划线。

在一些实例中，当所选择的操作选项为添加标注时，所述方法进一步包括如下处理：

1、生成标注信息；其中，当对所述选中的第一内容元素执行添加标注的处理时，根据所述第一内容元素的位置信息生成所述标注信息；当对所述一组选中的内容元素执行添加标注的处理时，根据所述第一内容元素和所述第二内容元素的位置信息生成所述标注信息。这里，此标注信息可以包含第一内容元素和第二内容元素的位置信息，这样可以根据此标注信息确定绘制标注的起点和终点。此标注信息也可以是根据第一内容元素和第二内容元素的位置信息生成的可用于绘制标注的各种位置参数。本申请对此标注信息的具体形式不做限定。

2、存储所述标注信息。

3、当展示所述第一页面时，读取所存储的所述标注信息，并根据所读取的所述标注信息在所述页面图片中绘制所述标注。

在一些实例中，当将所述第一位置信息转换成所述页面图片的坐标系中的第二位置信息之后，所述方法进一步包括如下处理：

1、当根据所述第二位置信息和所读取的所述标注信息确定所述第二位置信息不属于所述标注信息对应的区域时，根据所述UI操作的类型，在所述页面图片中绘制位于所述第一内容元素附近的包含添加标注选项的操作选项或者根据该第一内容元素对应的链接地址跳转到第二页面。

2、当根据所述第二位置信息和所读取的所述标注信息确定所述第二位置信息属于所述标注信息对应的区域时，根据所述UI操作的类型，在所述页面图片中绘制位于所述第一内容元素附近的包含删除标注选项的操作选项者根据该第一内容元素对应的链接地址跳转到第二页面，其中，响应于对所述删除标注选项的选择操作，在所述页面图片中去除所述第一内容元素对应的标注，并删除所存储的所述第一内容元素对应的标注信息。

例如，当用户长按图9E所示页面中的点913时，阅读器应用客户端可根据此点913的第二位置信息和所读取的标注信息确定，该第二位置信息属于标注信息对应的区域，即图9E中带下划线标注的内容元素902～909覆盖的区域包含该第二位置信息，也即该第二位置信息对应的内容元素包含在内容元素902～909覆盖的区域，则此时可在根据点913的第二位置信息确定的选中的第一内容元素附近绘制包含删除标注选项910的操作选项，如图9F所示。当用户点击了“删除”选项910时，阅读器应用客户端去除该第一内容元素对应的标注，如图9G所示，内容元素902～909的下划线标注被去除了。

在一些实例中，所述展示第一页面，可具体包括：获取所述第一页面的排版数据结构；根据所获取的所述排版数据结构绘制所述页面图片。在展示一页面时，应用客户端会根据从应用服务器拉取到的页面数据以及预设的通用排版数据结构生成该页面的排版数据结构，将各内容元素的内容(文本或图片标识或者图片路径)、位置信息、样式参数填到排版数据结构中，然后利用此排版数据结构来渲染页面图片。

在一些实例中，一个页面的排版数据结构可以为一个树形结构，该树形结构中的每一个结点代表该页面中的一个内容元素，并描述了该内容元素的位置坐标(如左上点坐标)、尺寸信息(如面积参数)、样式信息(字体、颜色、字号等)、属性信息(指示是否有超链接)。该树形结构中可分为多个层，每一结点可描述一个内容对象，根结点代表该页面，可描述一个页面对象，描述文本内容对象的结点可由上到下分为描述文本栏对象的结点、描述文本段对象的结点、描述文本行对象的结点、描述文本单词对象的结点这四个层次，在此树形结构中，叶子结点包括：描述图片对象的结点和描述文本单词对象的结点这两类。其中，文本单词对象描述了文本内容，即文本字符本身，包括中文字、中文词、英文词等，图片对象描述了图片内容，可包括图片名(或者说图片标识)、可用于载入图片的图片路径。

其中，从应用服务器获取的页面数据可包括：各内容元素的内容、版式信息、样式信息，应用客户端会根据自身终端的屏幕显示参数以及版式信息确定各内容元素的位置坐标及面积参数，关于样式信息，有一些来自于页面数据，有一些来自与应用客户端上用户的个性化设置(比如字号、颜色等)。应用客户端侧设置的样式信息还可以同步到应用服务器，并与用户账号相关联，当用户使用此用户账号再次登录时，应用服务器可以将此用户账号关联的样式信息包含在页面数据中发送给应用客户端，使应用客户端可以直接按用户之前设置的样式信息(颜色、背景、字号等)渲染页面。

在一些实例中，所述获取所述第一页面的排版数据结构，包括：当已生成了所述第一页面的排版数据结构时，查找所述第一页面的标识对应的排版数据结构。如果应用客户端曾经访问过此页面，则曾经生成过该页面的排版数据结构，则能够查找到该页面的标识对应的排版数据结构。当未生成所述第一页面的排版数据结构时，根据从应用服务器获取到的所述第一页面的页面数据以及预存的排版数据结构模板，生成所述第一页面的排版数据结构。如果应用客户端是首次访问此页面，则可根据页面数据以及预存的模板生成该页面的排版数据结构。

基于上述实例，本申请还提出了一种页面数据处理装置，可应用于上述的应用客户端101，如图6所示，该装置600包括：UI处理模块601、页面绘制模块604、页面跳转模块605、查找模块602、排版结构模块603。它们的工作原理如下：

页面绘制模块604，展示第一页面；其中，所述第一页面包含页面图片，所述页面图片中包含一个或多个内容元素。

UI处理模块601，响应于对于所述第一页面的第一UI操作，确定所述第一UI操作的类型和第一位置信息；其中，所述第一位置信息为UI坐标系中的位置信息；将所述第一位置信息转换成所述页面图片的坐标系中的第二位置信息。

查找模块602，根据所述第二位置信息，在排版结构模块603保存的所述第一页面的排版数据结构中查找选中的第一内容元素；其中，排版数据结构描述了所述页面图片中每一个内容元素在所述页面图片的坐标系中的位置信息以及各内容元素之间的关联关系，当所述第二位置信息属于一个内容元素的所述位置信息对应的区域时，确定该内容元素为选中的第一内容元素。

查找模块602，根据所述UI操作的类型，令页面绘制模块604在所述页面图片中绘制位于所述第一内容元素附近的操作选项或者令页面跳转模块605根据所述第一内容元素对应的链接地址跳转到第二页面。

在一些实例中，当页面绘制模块604绘制位于该选中的第一内容元素附近的操作选项之后，其它模块可执行如下处理：

UI处理模块601，响应于对于所述第一页面的第二UI操作，确定所述第二UI操作的第三位置信息；其中，所述第三位置信息为所述UI坐标系中的位置信息；将所述第三位置信息转换成所述页面图片的坐标系中的第四位置信息。

查找模块602，根据所述第四位置信息，在排版结构模块603保存的所述排版数据结构中查找选中的第二内容元素；其中，当所述第四位置信息属于一个内容元素的所述位置信息对应的区域时，确定该内容元素为选中的第二内容元素。

UI处理模块601，响应于对任一操作选项的选择操作，令查找模块602根据所选择的该操作选项对所述选中的第一内容元素或者一组选中的内容元素执行相应的处理，其中，所述一组选中的内容元素为根据所述排版数据结构描述的各内容元素之间的关联关系而确定的一组从所述第一内容元素开始到所述第二内容元素结束的内容元素。

在一些实例中，当所选择的操作选项为添加标注时，UI处理模块601令查找模块602对所述选中的第一内容元素或者一组选中的内容元素执行添加标注的处理。

具体的，对所述选中的第一内容元素执行的所述添加标注的处理，包括：查找模块602，令页面绘制模块604根据所述排版数据结构描述的所述第一内容元素的位置信息，在所述页面图片中绘制所述第一内容元素的标注。

具体的，对所述一组选中的内容元素执行的所述添加标注的处理，包括：查找模块602，令页面绘制模块604根据所述排版数据结构描述的所述第一内容元素和所述第二内容元素的位置信息，在所述页面图片中绘制所述一组选中的内容元素的标注。

在一些实例中，当所选择的操作选项为添加标注时，装置600进一步包括标注存储模块606。各模块的工作原理如下：

查找模块602，进一步生成标注信息；其中，当对所述选中的第一内容元素执行添加标注的处理时，根据所述第一内容元素的位置信息生成所述标注信息；当对所述一组选中的内容元素执行添加标注的处理时，根据所述第一内容元素和所述第二内容元素的位置信息生成所述标注信息。

查找模块602，进一步将所述标注信息存储至标注存储模块606；

当展示所述第一页面时，查找模块602从标注存储模块606读取所述标注信息，并令页面绘制模块604根据所读取的所述标注信息在所述页面图片中绘制所述标注。

在一些实例中，当将所述第一位置信息转换成所述页面图片的坐标系中的第二位置信息之后，各模块的处理如下：

当根据所述第二位置信息和所读取的所述标注信息确定所述第二位置信息不属于所述标注信息对应的区域时，查找模块602根据所述UI操作的类型，令页面绘制模块604在所述页面图片中绘制位于所述第一内容元素附近的包含添加标注选项的操作选项，或者令页面跳转模块605根据所述第一内容元素对应的链接地址跳转到第二页面。

当根据所述第二位置信息和所读取的所述标注信息确定所述第二位置信息属于所述标注信息对应的区域时，所述查找模块602根据所述UI操作的类型，令页面绘制模块604在所述页面图片中绘制位于所述第一内容元素附近的包含删除标注选项的操作选项或者令页面跳转模块605根据该选中的第一内容元素对应的链接地址跳转到所述第二页面，其中，响应于对所述删除标注选项的选择操作，查找模块602令页面绘制模块604在所述页面图片中去除所述第一内容元素对应的标注，并删除标注存储模块606存储的所述第一内容元素对应的标注信息。

在一些实例中，当展示所述第一页面时，查找模块602从排版结构模块603中获取所述第一页面的排版数据结构，并令页面绘制模块604根据所获取的所述排版数据结构绘制所述页面图片。

在一些实例中，所述获取所述第一页面的排版数据结构，包括：

当已生成了所述第一页面的排版数据结构时，查找模块602从排版结构模块603中查找所述第一页面的标识对应的排版数据结构；当未生成所述第一页面的排版数据结构时，查找模块602根据从应用服务器102获取到的所述第一页面的页面数据以及预存的排版数据结构模板，生成所述第一页面的排版数据结构并将其存储到排版结构模块603中，其中，第一页面的标识可与此排版数据结构关联。

为更清楚的阐述上述装置600的实现原理，图7和8给出了一些实例中上述模块的消息交互图。

图7示出了如下处理步骤：

步骤701～703：当用户操作应用客户端101的UI时，UI处理模块601接收UI事件1，对该UI事件1携带的点击位置坐标1(UI坐标系的坐标)做坐标转换得到点击位置坐标2(页面图片坐标系的坐标)，并确定UI事件类型，比如：是长按、点击、双击、滑动等操作，在本实例中，以点击和长按两种操作为例进行说明。UI处理模块601将点击位置坐标2和UI事件类型传递给查找模块602。

步骤704～706：查找模块602向排版结构模块603发送携带点击位置坐标2的查找请求，排版结构模块603遍历当前页面的排版数据结构中的各个对象，直到查找到点击位置坐标2对应的文本单词对象或图片对象，并将其作为选中的对象1。排版结构模块603返回对象1的参数，可包括：对象1的标识、对象1左上点坐标和面积参数等。

步骤707：查找模块602识别接收到的UI事件类型，如果是点击操作，则执行步骤709；如果是长按操作，则执行步骤712。

步骤708：查找模块602发送携带对象1的标识的请求到排版结构模块603，以查找跳转链接。

步骤709：排版结构模块603根据对象1的标识，判断对象1是否有跳转链接，如果是，执行步骤710；否则执行步骤711。这里，排版结构模块603中的该页面的排版数据结构中可记录各个对象的链接属性参数，该参数可指示相应的对象是否有跳转链接，如果有跳转链接则可记录链接地址(如超链接、URL等)。

步骤710：排版结构模块603向页面跳转模块605发送携带链接地址的页面跳转请求，页面跳转模块605根据该链接地址执行页面跳转操作，进而跳转到新的页面，使应用客户端101的界面中可以展示新的页面。

步骤711：排版结构模块603向查找模块602返回失败响应，也就是说，如果用户做了点击操作，而点击操作是用来跳转页面的，而根据排版数据结构的记录，当前点击位置对应的页面元素(文本单词或图片)并没有对应的跳转链接，所以当前UI操作是无效的，属于用户误操作，页面展示内容不会发生变化。

步骤712～714：查找模块602向页面绘制模块604发送携带对象1的参数的操作选项绘制请求，页面绘制模块604根据对象1的参数在当前的页面图片中对象1的位置上绘制选中浮层(如图9C中选中的文本单词对象902上的方框浮层)，并在对象1的附近绘制操作选项UI，其中可包括分享、词典、纠错、加笔记、加标注等选项(如图9C中的操作选项903～908)。在绘制完毕时，页面绘制模块604向查找模块602返回响应，表明可开始处理针对操作选项的操作了。UI处理模块601接收UI事件2，在本实例中，UI事件2可为点击和拖动两种操作。

步骤715：UI处理模块601对UI事件2携带的拖动结束位置坐标1(UI坐标系的坐标)进行坐标转换，得到拖动结束位置坐标2(页面图片的坐标系的坐标)，同时根据UI事件2还能确定点击操作选择的操作选项。这里，拖动操作指的是对上述选中浮层的拖动操作，如图9C中选中的文本单词对象902上的方框浮层，通过拖动此浮层可以选择文本区域，如图9D所示，经过拖动操作，此浮层覆盖到文本单词对象902～909之间的一段文本区域，本步骤确定的拖动结束位置坐标2就是文本单词对象909对应的位置坐标。

步骤716～719：UI处理模块601将拖动结束位置坐标2和所确定的操作选项参数传递给查找模块602。查找模块602向排版结构模块603发送携带拖动结束位置坐标2的查找请求，排版结构模块603遍历当前页面的排版数据结构中的各个对象，直到查找到拖动结束位置坐标2对应的文本单词对象或图片对象，并将其作为选中的对象2。排版结构模块603返回对象2的参数，可包括：对象2的标识、对象2左上点坐标和面积参数等。

步骤720：查找模块602识别接收到的操作选项，如果是加标注选项，则向页面绘制模块604发送携带对象2的参数的标注绘制请求，页面绘制模块604根据对象1和对象2的参数绘制从对象1开始到对象2结束的一组对象的标注，如图9E中文本单词对象902～909的下划线标注。查找模块602还执行步骤721。如果是其它选项，比如：分享、词典、纠错、搜索、加笔记等选项，则执行步骤722。

步骤721：查找模块602生成标注信息，该标注信息可以包括对象1和对象2的参数，将生成的标注信息携带在存储标注请求中发给标注存储模块606，以使标注存储模块606存储此标注信息，并将此标注信息与当前页面的标识相关联，即将此标注信息存储为当前页面的标注信息。

步骤722～723：查找模块602发送携带对象1和对象2标识的文本查找请求到排版结构模块603，排版结构模块603根据对象1和对象2标识从当前页面的排版数据结构中读取到从对象1到对象2结束的一组对象对应的文本内容，即选中的文本，并将选中的文本返回给查找模块602。查找模块602可发送携带选中的文本的操作请求到当前选择的操作选项对应的操作功能模块607，使其使用此选中的文本做相应的操作，比如：分享此文本给用户的好友，为此文本加笔记，在整个内容(包括当前页面和其它页面)中搜索此文本，对此文本进行纠错，在词典中查询此文本，等等。这里，在搜索文本时，可利用各个页面的排版数据结构进行搜索，如遍历各个排版数据结构，找到有此文本的各对象结点，并能确定各对象结点在各页面图片中的位置，进而能进行高亮标注等处理。

图8示出了如下处理步骤：

步骤801～803：当用户操作应用客户端101的UI时，UI处理模块601接收UI事件3，确定是请求打开页面1，向查找模块602发送携带页面1的标识的页面打开请求。这里，当用户点击一个内容图标(比如图9A所示的小说图标901)时可以请求打开一个页面，或者用户在当前页面一角做滑动操作时可以请求打开一个新的页面。

步骤804～806：查找模块602向排版结构模块603发送携带页面1的标识的查找请求。排版结构模块603获取页面1的标识对应的页面1的排版数据结构，并将其返回给查找模块602。

步骤807～809：查找模块602还向标注存储模块606发送携带页面1的标识的查找请求，标注存储模块606获取页面1的标识对应的页面1中各对象的标注信息，并将其返回给查找模块602。这里，标注信息可以包括其所对应的各对象的位置信息(如页面图片中的位置坐标、面积参数等)。

步骤810～812：查找模块602向页面绘制模块604发送携带页面1的标注信息和排版数据结构的页面绘制请求。页面绘制模块604根据排版数据结构绘制页面1的页面图片，根据标注信息在页面图片中绘制标注。

步骤812～814：UI处理模块601接收UI事件1，对该UI事件1携带的点击位置坐标1(UI坐标系的坐标)做坐标转换得到点击位置坐标2(页面图片坐标系的坐标)，并确定UI事件类型，比如：是长按或点击操作。UI处理模块601将点击位置坐标2和UI事件类型传递给查找模块602。

步骤815～817：查找模块602向排版结构模块603发送携带点击位置坐标2的查找请求，排版结构模块603遍历页面1的排版数据结构中的各个对象，直到查找到点击位置坐标2对应的文本单词对象或图片对象，并将其作为选中的对象1。排版结构模块603返回对象1的参数，可包括：对象1的标识、对象1左上点坐标和面积参数等。

步骤818：查找模块602判断对象1是否有标注信息，如果是，则执行步骤819；否则执行图7中的步骤707，后续处理前文已有描述。

步骤819～820：查找模块602向页面绘制模块604发送操作选项绘制请求，该请求携带对象1的参数并指示对象1有标注信息。页面绘制模块604根据对象1的参数在对象1附近绘制操作选项UI，包括：删除标注、加笔记、分享选项。如图9E所示，用户点击位置是点913，而点913对应的文本单词对象有下滑线标注，则会绘制图图9F所示的包括操作选项904、908和910的操作选项UI。

步骤821～823：UI处理模块601接收UI事件2并确定用户所选择的操作选项，在本实例中，UI事件2可为点击操作。UI处理模块601将确定的操作选项的信息传递给查找模块602。

步骤824～825：查找模块602识别接收到的操作选项，如果是删除标注选项，则向页面绘制模块604发送携带对象1的标注信息的删除标注请求，页面绘制模块604根据对象1的标注信息删除对象1对应的标注。这里，对象1的标注信息可以包括对象1的位置参数，也可包括与对象1的标注有关的其它对象的位置参数。例如，如果对象1的标注只针对对象1，则标注信息包括对象1的位置参数，如果对象1的标注涉及多个对象(比如：从对象1开始到对象2结束的一组对象的标注，如图9E中文本单词对象902～909的下划线标注)，则标注信息可包括对象1的位置参数，也可包括此标注起点和终点对象的位置参数。总之，页面绘制模块604可以根据这种标注信息确定已绘制的与对象1有关的标注，再从页面图片中去除此标注。同时，查找模块602还向标注存储模块606发送删除标注请求，该请求可携带对象1的信息(如对象1的标识或位置参数等)，使标注存储模块606可以删除对象1对应的标注信息，这样，当下次打开页面1时，对象1对应的标注就不会绘制在页面图片中了。如果是其它选项，比如：分享、加笔记等选项，则执行图7中的步骤722，具体处理前文已有详述。

另外，在本申请各个实例中的应用客户端以及其中的各组成部分可以集成在一个处理单元中，也可以是各个模块单独物理存在，也可以两个或两个以上实体(应用客户端、应用客户端)或组成部分集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

在一实例中，上述的实体可运行在各种计算设备中，并加载在该计算设备的存储器中。

图10示出了上述实体所在的计算设备的组成结构图。如图10所示，该计算设备包括一个或者多个处理器(CPU)1002、通信模块1004、存储器1006、用户接口1010，以及用于互联这些组件的通信总线1008。

处理器1002可通过通信模块1004接收和发送数据以实现网络通信和/或本地通信。

用户接口1010包括一个或多个输出设备1012，其包括一个或多个扬声器和/或一个或多个可视化显示器。用户接口1010也包括一个或多个输入设备1014，其包括诸如，键盘，鼠标，声音命令输入单元或扩音器，触屏显示器，触敏输入板，姿势捕获摄像机或其他输入按钮或控件等。

存储器1006可以是高速随机存取存储器，诸如DRAM、SRAM、DDR RAM、或其他随机存取固态存储设备；或者非易失性存储器，诸如一个或多个磁盘存储设备、光盘存储设备、闪存设备，或其他非易失性固态存储设备。

存储器1006存储处理器1002可执行的指令集，包括：

操作系统1016，包括用于处理各种基本系统服务和用于执行硬件相关任务的程序；

应用1018，包括用于实现上述媒体数据处理方法的各种程序，这种程序能够实现上述各实例中的处理流程，比如可以包括图6所示的装置600。

在一些实例中，装置600可包括图6所示的各部分601～606，各部分601～606可以存储有机器可执行指令。处理器1002通过执行存储器1006中各部分601～606中的机器可执行指令，进而能够实现上述各部分601～606的功能。

另外，本申请的每一个实例可以通过由数据处理设备如计算机执行的数据处理程序来实现。显然，数据处理程序构成了本发明。此外，通常存储在一个存储介质中的数据处理程序通过直接将程序读取出存储介质或者通过将程序安装或复制到数据处理设备的存储设备(如硬盘和或内存)中执行。因此，这样的存储介质也构成了本发明。存储介质可以使用任何类型的记录方式，例如纸张存储介质(如纸带等)、磁存储介质(如软盘、硬盘、闪存等)、光存储介质(如CD-ROM等)、磁光存储介质(如MO等)等。

因此本申请还公开了一种非易失性存储介质，其中存储有数据处理程序，该数据处理程序用于执行本申请上述方法的任何一种实例。

另外，本申请所述的方法步骤除了可以用数据处理程序来实现，还可以由硬件来实现，例如，可以由逻辑门、开关、专用集成电路(ASIC)、可编程逻辑控制器和嵌微控制器等来实现。因此这种可以实现本申请所述方法的硬件也可以构成本申请。

以上所述仅为本申请的较佳实例而已，并不用以限制本申请，凡在本申请的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本申请保护的范围之内。

Claims (15)

1.一种页面数据处理方法，其特征在于，该方法包括：

展示第一页面；其中，所述第一页面包含页面图片，所述页面图片中包含一个或多个内容元素；

响应于对于所述第一页面的第一用户界面UI操作，确定所述第一UI操作的类型和第一位置信息；其中，所述第一位置信息为UI坐标系中的位置信息；

将所述第一位置信息转换成所述页面图片的坐标系中的第二位置信息；

根据所述第二位置信息，在所述第一页面的排版数据结构中查找选中的第一内容元素；其中，所述排版数据结构描述了所述页面图片中每一个内容元素在所述页面图片的坐标系中的位置信息以及各内容元素之间的关联关系，当所述第二位置信息属于一个内容元素的所述位置信息对应的区域时，确定该内容元素为选中的第一内容元素；及

根据所述UI操作的类型，在所述页面图片中绘制位于所述第一内容元素附近的操作选项或者根据所述第一内容元素对应的链接地址跳转到第二页面。

2.根据权利要求1所述的方法，其中，所述排版数据结构进一步描述了所述一个或多个内容元素构成的树形结构，其中，一个结点代表一个内容元素，两个结点之间的链接代表这两个结点代表的两个内容元素之间的从属关系；

其中，所述在所述第一页面的排版数据结构中查找选中的第一内容元素包括：从根结点开始逐层遍历所述树形结构中的各个结点，直到确定一个叶子结点代表的内容元素为选中的第一内容元素，其中，当所述第二位置信息属于一个叶子结点代表的内容元素的所述位置信息对应的区域时，确定该叶子结点代表的该内容元素为选中的第一内容元素。

3.根据权利要求1所述的方法，其中，当绘制位于该选中的第一内容元素附近的操作选项之后，所述方法进一步包括：

响应于对于所述第一页面的第二UI操作，执行如下处理：

确定所述第二UI操作的第三位置信息；其中，所述第三位置信息为所述UI坐标系中的位置信息；

将所述第三位置信息转换成所述页面图片的坐标系中的第四位置信息；及

根据所述第四位置信息，在所述排版数据结构中查找选中的第二内容元素；其中，当所述第四位置信息属于一个内容元素的所述位置信息对应的区域时，确定该内容元素为选中的第二内容元素；

及

响应于对任一操作选项的选择操作，根据所选择的该操作选项对所述选中的第一内容元素或者一组选中的内容元素执行相应的处理，其中，所述一组选中的内容元素为根据所述排版数据结构描述的各内容元素之间的关联关系而确定的一组从所述第一内容元素开始到所述第二内容元素结束的内容元素。

4.根据权利要求3所述的方法，其中，当所选择的操作选项为添加标注时，对所述选中的第一内容元素或者一组选中的内容元素执行添加标注的处理；

其中，对所述选中的第一内容元素执行的所述添加标注的处理，包括：根据所述排版数据结构描述的所述第一内容元素的位置信息，在所述页面图片中绘制所述第一内容元素的标注；

其中，对所述一组选中的内容元素执行的所述添加标注的处理，包括：根据所述排版数据结构描述的所述第一内容元素和所述第二内容元素的位置信息，在所述页面图片中绘制所述一组选中的内容元素的标注。

5.根据权利要求4所述的方法，其中，当所选择的操作选项为添加标注时，所述方法进一步包括：

生成标注信息；其中，当对所述选中的第一内容元素执行添加标注的处理时，根据所述第一内容元素的位置信息生成所述标注信息；当对所述一组选中的内容元素执行添加标注的处理时，根据所述第一内容元素和所述第二内容元素的位置信息生成所述标注信息；

存储所述标注信息；

当展示所述第一页面时，读取所存储的所述标注信息，并根据所读取的所述标注信息在所述页面图片中绘制所述标注。

6.根据权利要求5所述的方法，其中，当将所述第一位置信息转换成所述页面图片的坐标系中的第二位置信息之后，所述方法进一步包括：

当根据所述第二位置信息和所读取的所述标注信息确定所述第二位置信息不属于所述标注信息对应的区域时，根据所述UI操作的类型，在所述页面图片中绘制位于所述第一内容元素附近的包含添加标注选项的操作选项或者根据该选中的第一内容元素对应的链接地址跳转到第二页面；

当根据所述第二位置信息和所读取的所述标注信息确定所述第二位置信息属于所述标注信息对应的区域时，根据所述UI操作的类型，在所述页面图片中绘制位于所述第一内容元素附近的包含删除标注选项的操作选项或者根据所述第一内容元素对应的链接地址跳转到所述第二页面，其中，响应于对所述删除标注选项的选择操作，在所述页面图片中去除所述第一内容元素对应的标注，并删除所存储的所述第一内容元素对应的标注信息。

7.根据权利要求1所述的方法，其中，所述展示第一页面，包括：

获取所述第一页面的排版数据结构；

根据所获取的所述排版数据结构绘制所述页面图片。

8.根据权利要求7所述的方法，其中，所述获取所述第一页面的排版数据结构，包括：

当已生成了所述第一页面的排版数据结构时，查找所述第一页面的标识对应的排版数据结构；

当未生成所述第一页面的排版数据结构时，根据从应用服务器获取到的所述第一页面的页面数据以及预存的排版数据结构模板，生成所述第一页面的排版数据结构。

9.一种页面数据处理装置，其特征在于，该装置包括：用户界面UI处理模块、页面绘制模块、页面跳转模块、查找模块、排版结构模块；其中，

所述页面绘制模块，展示第一页面；其中，所述第一页面包含页面图片，所述页面图片中包含一个或多个内容元素；

所述UI处理模块，响应于对于所述第一页面的第一UI操作，确定所述第一UI操作的类型和第一位置信息；其中，所述第一位置信息为UI坐标系中的位置信息；将所述第一位置信息转换成所述页面图片的坐标系中的第二位置信息；

所述查找模块，根据所述第二位置信息，在所述排版结构模块保存的所述第一页面的排版数据结构中查找选中的第一内容元素；其中，所述排版数据结构描述了所述页面图片中每一个内容元素在所述页面图片的坐标系中的位置信息以及各内容元素之间的关联关系，当所述第二位置信息属于一个内容元素的所述位置信息对应的区域时，确定该内容元素为选中的第一内容元素；及

所述查找模块，根据所述UI操作的类型，令所述页面绘制模块在所述页面图片中绘制位于所述第一内容元素附近的操作选项或者令所述页面跳转模块根据所述第一内容元素对应的链接地址跳转到第二页面。

10.根据权利要求9所述的装置，其中，当所述页面绘制模块绘制位于该选中的第一内容元素附近的操作选项之后，

所述UI处理模块，响应于对于所述第一页面的第二UI操作，确定所述第二UI操作的第三位置信息；其中，所述第三位置信息为所述UI坐标系中的位置信息；将所述第三位置信息转换成所述页面图片的坐标系中的第四位置信息；

所述查找模块，根据所述第四位置信息，在所述排版结构模块保存的所述排版数据结构中查找选中的第二内容元素；其中，当所述第四位置信息属于一个内容元素的所述位置信息对应的区域时，确定该内容元素为选中的第二内容元素；

所述UI处理模块，响应于对任一操作选项的选择操作，令所述查找模块根据所选择的该操作选项对所述选中的第一内容元素或者一组选中的内容元素执行相应的处理，其中，所述一组选中的内容元素为根据所述排版数据结构描述的各内容元素之间的关联关系而确定的一组从所述第一内容元素开始到所述第二内容元素结束的内容元素。

11.根据权利要求10所述的装置，其中，当所选择的操作选项为添加标注时，所述UI处理模块令所述查找模块对所述选中的第一内容元素或者一组选中的内容元素执行添加标注的处理；

其中，对所述选中的第一内容元素执行的所述添加标注的处理，包括：所述查找模块，令所述页面绘制模块根据所述排版数据结构描述的所述第一内容元素的位置信息，在所述页面图片中绘制所述第一内容元素的标注；

其中，对所述一组选中的内容元素执行的所述添加标注的处理，包括：所述查找模块，令所述页面绘制模块根据所述排版数据结构描述的所述第一内容元素和所述第二内容元素的位置信息，在所述页面图片中绘制所述一组选中的内容元素的标注。

12.根据权利要求11所述的装置，其中，当所选择的操作选项为添加标注时，所述装置进一步包括标注存储模块；

所述查找模块，进一步生成标注信息；其中，当对所述选中的第一内容元素执行添加标注的处理时，根据所述第一内容元素的位置信息生成所述标注信息；当对所述一组选中的内容元素执行添加标注的处理时，根据所述第一内容元素和所述第二内容元素的位置信息生成所述标注信息；

所述查找模块，进一步将所述标注信息存储至所述标注存储模块；

当展示所述第一页面时，所述查找模块从所述标注存储模块读取所述标注信息，并令所述页面绘制模块根据所读取的所述标注信息在所述页面图片中绘制所述标注。

13.根据权利要求12所述的装置，其中，当将所述第一位置信息转换成所述页面图片的坐标系中的第二位置信息之后，

当根据所述第二位置信息和所读取的所述标注信息确定所述第二位置信息不属于所述标注信息对应的区域时，所述查找模块根据所述UI操作的类型，令所述页面绘制模块在所述页面图片中绘制位于所述第一内容元素附近的包含添加标注选项的操作选项，或者令所述页面跳转模块根据所述第一内容元素对应的链接地址跳转到第二页面；

当根据所述第二位置信息和所读取的所述标注信息确定所述第二位置信息属于所述标注信息对应的区域时，所述查找模块根据所述UI操作的类型，令所述页面绘制模块在所述页面图片中绘制位于所述第一内容元素附近的包含删除标注选项的操作选项或者令所述页面跳转模块根据该选中的第一内容元素对应的链接地址跳转到所述第二页面，其中，响应于对所述删除标注选项的选择操作，令所述页面绘制模块在所述页面图片中去除所述第一内容元素对应的标注，并删除所述标注存储模块存储的所述第一内容元素对应的标注信息。

14.根据权利要求9所述的装置，其中，当展示所述第一页面时，所述查找模块从所述排版结构模块中获取所述第一页面的排版数据结构，并令所述页面绘制模块根据所获取的所述排版数据结构绘制所述页面图片。

15.一种存储介质，其特征在于，存储有数据处理程序，该数据处理程序用于使计算机执行如权利要求1至8任一项所述的方法。