CN110889056A

CN110889056A - 页面标记的方法及装置

Info

Publication number: CN110889056A
Application number: CN201911243329.XA
Authority: CN
Inventors: 李彩云; 吴明丹; 高春旭; 叶峻
Original assignee: Beijing Baidu Netcom Science and Technology Co Ltd
Current assignee: Beijing Baidu Netcom Science and Technology Co Ltd
Priority date: 2019-12-06
Filing date: 2019-12-06
Publication date: 2020-03-17
Anticipated expiration: 2039-12-06
Also published as: CN110889056B

Abstract

本申请实施例提供一种页面标记的方法及装置，涉及大数据领域，具体包括：获取页面中需要标记的容器区域；生成覆盖容器区域的画布；其中，在画布覆盖容器区域时，容器区域的页面内容对用户可见；在画布中接收绘制操作，并得到绘制操作形成的标记区域的位置信息；向服务器发送标记区域的位置信息，服务器用于在标记区域接收到预设事件的情况下，记录预设事件。即用户可以在覆盖于页面的需要标记的容器区域上的画布中进行绘制操作，进而得到绘制操作形成的标记区域的位置信息，则该标记区域是符合用户需求的标记区域，因此在标记区域中收集预设事件时，收集的预设事件较准确。

Description

页面标记的方法及装置

技术领域

本申请涉及数据处理技术领域的大数据领域，尤其涉及一种页面标记的方法及装置。

背景技术

收集用户对前端页面中某一区域的点击次数可以帮助网站站长或公司了解用户需求。

现有技术中，在采集用户对前端页面中某一区域的点击次数时，一种可能的实现方式是：通过可视化圈选标记页面自定义标记区域，进而统计该自定义标记区域接收到的点击次数。可视化圈选的具体实现可以是：首先遍历页面文档对象模型(document objectmodel，dom)结构内的所有块元素，为块元素添加标记事件，在完成标记后上报该块元素信息，同时埋点监听该块元素的点击事件，以达到采集该块元素区域内的点击行为的目的。

但是在现有技术中，可视化圈选标记页面的实现中，依赖于页面dom结构，使得圈选的事件只能以dom结构的块元素为单位，在圈选的区域中通常存在间距等无效区域，在无效区域中也可以采集到点击信息，导致采集的点击信息可能出现不准确。

发明内容

本申请实施例提供一种页面标记的方法及装置，以解决现有技术中在标记区域采集的信息的准确度不高的技术问题。

本申请实施例第一方面提供一种页面标记的方法，包括：

获取页面中需要标记的容器区域；生成覆盖所述容器区域的画布；其中，在所述画布覆盖所述容器区域时，所述容器区域的页面内容对用户可见；在所述画布中接收绘制操作，并得到所述绘制操作形成的标记区域的位置信息；向服务器发送所述标记区域的位置信息，所述服务器用于在所述标记区域接收到预设事件的情况下，记录所述预设事件。

本申请实施例中，用户可以基于画布随意标记当前页面的任意区域，不需要依赖dom结构，也不会因为dom结构的块元素造成圈定无效区域，因此在标记区域中收集信息时，收集的信息较准确。

可选的，所述生成覆盖所述容器区域的画布，包括：获取所述容器区域相对于所述页面的第一位置信息；根据所述第一位置信息生成与所述容器区域的覆盖范围相同的画布；将所述画布覆盖在所述容器区域上。基于该第一位置信息，可以避免在确定标记区域的位置信息时，额外获取整个页面的坐标，使得所述标记区域的位置信息为所述标记区域相对于所述容器区域的位置信息，从而可以节约计算资源。

可选的，所述页面中包括用于触发标记页面的控件；所述获取页面中需要标记的容器区域，包括：在接收到对应于所述控件的触发操作的情况下，生成所述页面中需要标记的容器区域。这样，用户可以通过控件便捷的触发页面标记。

可选的，所述控件为可拖拽的控件。控件的可拖拽功能可以避免控件被页面本身的结构覆盖，从而可以确保控件可以被用户触发。

可选的，还包括：接收用户输入的所述标记区域的名称；向服务器发送所述标记区域的名称。这样，后续服务器可以便捷的基于标记区域的名称和位置信息实现对标记区域的信息采集。

可选的，所述在所述画布中接收绘制操作，并得到所述绘制操作形成的标记区域的位置信息，包括：在所述画布中接收连续触摸操作，并记录所述连续触摸操作经过的位置信息，所述连续触摸操作形成的轨迹为所述标记区域；根据所述连续触摸操作经过的位置信息确定所述标记区域的位置信息。这样，用户可以基于简单的连续触摸操作，实现对标记区域的圈定。

可选的，所述标记区域的位置信息为所述标记区域相对于所述容器区域的位置信息。

可选的，所述预设事件包括下述至少一种：点击事件、滑动事件或拖拽事件。

本申请实施例第二方面提供一种页面标记的装置，包括：

获取模块，用于获取页面中需要标记的容器区域；

生成模块，用于生成覆盖所述容器区域的画布；其中，在所述画布覆盖所述容器区域时，所述容器区域的页面内容对用户可见；

绘制模块，用于在所述画布中接收绘制操作，并得到所述绘制操作形成的标记区域的位置信息；

发送模块，用于向服务器发送所述标记区域的位置信息，所述服务器用于在所述标记区域接收到预设事件的情况下，记录所述预设事件。

可选的，所述生成模块，具体用于：

获取所述容器区域相对于所述页面的第一位置信息；

根据所述第一位置信息生成与所述容器区域的覆盖范围相同的画布；

将所述画布覆盖在所述容器区域上。

可选的，所述页面中包括用于触发标记页面的控件；

所述获取模块，具体用于：

在接收到对应于所述控件的触发操作的情况下，生成所述页面中需要标记的容器区域。

可选的，所述控件为可拖拽的控件。

可选的，还包括：

接收模块，用于接收用户输入的所述标记区域的名称；

所述发送模块还用于：

向服务器发送所述标记区域的名称。

可选的，所述绘制模块具体用于：

在所述画布中接收连续触摸操作，并记录所述连续触摸操作经过的位置信息，所述连续触摸操作形成的轨迹为所述标记区域；

根据所述连续触摸操作经过的位置信息确定所述标记区域的位置信息。

本申请实施例第三方面提供一种电子设备，包括：至少一个处理器；以及与所述至少一个处理器通信连接的存储器；其中，所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行如前述第一方面任一项所述的方法。

本申请实施例第四方面提供一种存储有计算机指令的非瞬时计算机可读存储介质，所述计算机指令用于使所述计算机执行如前述第一方面中任一项所述的方法。

综上所述，本申请实施例相对于现有技术的有益效果：

本申请实施例中提供了一种页面标记的方法及装置，用户可以基于画布随意标记当前页面的任意区域，不需要依赖dom结构，也不会因为dom结构的块元素造成圈定无效区域，因此在标记区域中收集信息时，收集的信息较准确。具体的，获取页面中需要标记的容器区域；生成覆盖容器区域的画布；其中，在画布覆盖容器区域时，容器区域的页面内容对用户可见；在画布中接收绘制操作，并得到绘制操作形成的标记区域的位置信息；向服务器发送标记区域的位置信息，服务器用于在标记区域接收到预设事件的情况下，记录预设事件。即用户可以在覆盖于页面的需要标记的容器区域上的画布中进行绘制操作，进而得到绘制操作形成的标记区域的位置信息，则该标记区域是符合用户需求的标记区域，因此在标记区域中收集预设事件时，收集的预设事件较准确。

附图说明

图1为本申请实施例提供的页面标记的方法适用的系统架构示意图；

图2为本申请实施例提供的页面标记的方法的流程示意图；

图3为本申请实施例提供的页面标记的界面示意图；

图4为本申请实施例提供的页面标记装置的结构示意图；

图5是用来实现本申请实施例的页面标记的方法的电子设备的框图。

具体实施方式

以下结合附图对本申请的示范性实施例做出说明，其中包括本申请实施例的各种细节以助于理解，应当将它们认为仅仅是示范性的。因此，本领域普通技术人员应当认识到，可以对这里描述的实施例做出各种改变和修改，而不会背离本申请的范围和精神。同样，为了清楚和简明，以下的描述中省略了对公知功能和结构的描述。在不冲突的情况下，下述的实施例及实施例中的特征可以相互组合。

现有技术中，对页面进行可视化圈选的区域标记时，通过标记超文本标记语言(HyperText Markup Language，HTML)页面中的dom元素(也可以称为块元素)来标记采集区域。

在可视化圈选的过程中，依赖于dom结构中的块元素设置。示例性的，在dom结构中可以将页面划分为若干的块元素，标注时必须以块元素为基本标注单位，对于一个块元素而言，不仅包含了页面中的有效信息区域，还可能存在填充区和边框区(padding+border)等无效区域，使得用户在采集标注区域的点击次数等信息时，可能采集到的无效区域的点击信息，导致采集的信息不准确。

且在可视化圈选过程中，如果用户希望在一次圈选时，实现对多个块元素的圈选，即标记区域中包含多个块元素，则终端设备必须对标记区域的每个块元素分别标记，或标记多个块元素的父元素才能实现，这样需要进行多次标记，效率较低，且会进一步增加标记区域的无效区域。

且在可视化圈选过程中，对任一块元素进行标记时，需要遍历前端页面中的dom树，为dom元素绑定模仿悬停事件(hover)；标记完成后，采集各标记的块元素区域的用户行为时同样需要遍历dom树，为dom元素添加点击事件，导致dom元素绑定较多事件。

基于此，本申请实施例提出了一种利用画布(canvas)实现自定义页面标记区域方法，不受网站前端页面dom结构限制，所标记的区域为用户自定义标记的有效区域，可以避免无效区域的用户行为收集。

同时因为不需要遍历dom树和为dom树绑定更多事件，可以提升终端设备性能。

同时，在后续采集标记区域的点击数等数据时，无需遍历页面dom元素去根据路径或者元素标识匹配到点击(click)的元素，可以直接通过监听标记区域对应的文档(document)的click事件，然后判断点击事件所在的区域位置，从而可以减少dom元素事件绑定个数，提升客户端性能。

同时，因为利用画布进行页面标记时，可以不关注页面内的具体内容，因此在得到标记区域后，如果页面有动画效果，那么动画前和动画后的区域均可以属于标记区域统计范围，从而可以减少修订标记区域的次数。

后续实施例将具体说明利用画布实现自定义页面标记区域的具体实现，在此不再赘述。

本申请实施例的页面标记的方法可以应用于终端设备或服务器，终端设备可以包括：手机、平板电脑、笔记本电脑、或者台式电脑等电子设备。本申请实施例对应用的具体设备不作具体限定。

示例性的，终端设备或服务器中可以提供图形用户界面(graphical userinterface，GUI)，在图形用户界面中可以设置用于接收用户操作的控件、开关等，使得用户可以在图形用户界面中进行如本申请实施例的绘制操作，可以理解，图形用户界面的具体内容可以根据实际的应用场景确定，本发明实施例对此不作具体限定。

如图1所示，图1为本申请实施例提供的方法所适用的应用场景架构示意图。

本申请实施例中，用户可以在终端设备11中触发产生需要标记的容器(container)区域，适应的终端设备11可以在前端页面中获取需要标记的容器区域，进而终端设备11可以生成覆盖该容器区域的画布；其中，在画布覆盖该容器区域时，该容器区域的页面内容对用户可见，示例性的，画布可以设置为透明的，则用户后续在画布上绘制标记区域时，可以看到标注区域对应的页面内容，从而可以得到准确的标记区域。

终端设备11在画布中接收到绘制操作后，可以获取绘制操作形成的标记区域的位置信息，并将标记区域的位置信息发送给服务器12，则后续在终端设备的页面中接收到对标记区域的点击事件等时，在服务器12中可以将该标记区域对应的点击数记录，进而可以用于大数据分析等。

可以理解，具体应用中，服务器的数量可以为大于或等于1的任意值，本申请实施例对此不作具体限定。

如图2所示，图2为本申请实施例提供的页面标记的方法的流程示意图。

该方法具体可以包括：

S101：获取页面中需要标记的容器区域。

本申请实施例中，终端设备的浏览器支持canvas功能，在页面中可以设置用于触发进行本申请实施例的页面标记的方法的按钮，进而，用户可以通过触发按钮产生需要标记的容器区域。

一种可能的实现方式中，所述页面中包括用于触发标记页面的控件；所述获取页面中需要标记的容器区域，包括：在接收到对应于所述控件的触发操作的情况下，生成所述页面中需要标记的容器区域。

本申请实施例中，控件可以是开关或按钮等，用户可以通过鼠标点击、触摸点击、滑动、语音、手势等操作触发该控件，则终端设备可以生成页面中需要标记的容器区域。

示例性的，在用户点击控件后，可以选定终端设备当前界面的部分页面为需要标记的容器区域。需要说明的是，浏览器的页面通常存在滑动功能，因此终端设备当前界面显示的内容可以是页面的一部分。

可选的，该控件可以为可拖拽控件，控件的可拖拽功能可以避免控件被页面本身的结构覆盖，从而可以确保控件可以被用户触发。示例性的，可以在页面生成可拖拽的用于添加标记的按钮，并记录为$activeBtn。

S102：生成覆盖所述容器区域的画布；其中，在所述画布覆盖所述容器区域时，所述容器区域的页面内容对用户可见。

本申请实施例中，画布可以覆盖在容器区域上方，实现对容器区域内的页面内容的功能禁止，使得用户后续在画布中进行绘制操作时，不会触发页面本身的链接功能等。

具体应用中，画布可以是具有接受用户绘制操作功能的、透明的可操作区域，则用户在画布中进行绘制操作时，可以看到画布覆盖下的页面的内容，从而实现精准标注。

本申请实施例中，在终端设备获取容器区域时，终端设备可以首先确定容器区域的container结构，该container可以设置为$parentNode(父节点)，使得后续得到的标记区域的位置信息是相对于父节点位置信息；该container也可不设置，未设置下可以默认为body元素，则后续得到的标记区域的位置信息是相当于页面的。

可以理解，因为后续在确定标记区域的位置信息时，是在画布中确定的，画布覆盖在容器区域，因此将container设置为$parentNode，可以避免在确定标记区域的位置信息时，额外获取整个页面的坐标，使得所述标记区域的位置信息为所述标记区域相对于所述容器区域的位置信息，从而可以节约计算资源。

示例性的，获取容器区域后，容器区域的offsetWidth宽度和offsetHeight高度具体可以存储为$width,$height。

一种可能的实现方式中，所述生成覆盖所述容器区域的画布，包括：

获取所述容器区域相对于所述页面的第一位置信息；根据所述第一位置信息生成与所述容器区域的覆盖范围相同的画布；将所述画布覆盖在所述容器区域上。

本申请实施例中，可以将$parentNode的定位方式由静态(static)设置为相对(relative)，实现对容器区域的定位，也使得后续可以生成绝对定位的标记区域。

得到容器区域相对于页面的位置信息后，可以生成与容器区域大小相同的画布。示例性的，可以初始化一个canvas画布，记录为$drawingCanvas，位置(position)设置为absolute,$drawingCanvas，画布大小与$parentNode元素width、height、left和top属性完全相同，以便准确记录标记区域的位置坐标信息。最后利用$parentNode.appendChild($drawingCanvas)子节点，将$drawingCanvas添加至$parentNode。

S103：在所述画布中接收绘制操作，并得到所述绘制操作形成的标记区域的位置信息。

本申请实施例中，用户可以通过鼠标或感应笔或手指等在画布中进行绘制操作，在画布中接收到绘制操作时，可以记录绘制操作对应的位置信息，得到绘制操作形成的标记区域的位置信息。

一种可选的实现方式中，所述在所述画布中接收绘制操作，并得到所述绘制操作形成的标记区域的位置信息，包括：在所述画布中接收连续触摸操作，并记录所述连续触摸操作经过的位置信息，所述连续触摸操作形成的轨迹为所述标记区域；根据所述连续触摸操作经过的位置信息确定所述标记区域的位置信息。

本申请实施例中，连续触摸操作可以包括鼠标在画布中的连续拖动操作，或手指在画布中的连续滑动操作，或感应笔在画布中的连续绘制操作等，本申请实施例对此不作具体限定。连续触摸的轨迹可以为标记区域，触摸操作经过的位置信息可以作为标记区域的位置信息。

一种可选的实现方式中，所述在所述画布中接收绘制操作，并得到所述绘制操作形成的标记区域的位置信息，包括：在所述画布中接收按压事件，并记录所述按压事件的位置信息；在所述画布中接收拖动事件，并记录所述拖动事件产生的位置信息；所述拖动事件以所述按压事件的位置为起始点；在接收到抬起事件时，根据所述按压事件的位置信息、所述拖动事件产生的位置信息以及所述抬起事件的位置信息，得到所述标记区域的位置信息。

以用户通过鼠标在画布中进行绘制操作为例，按压事件可以对应于鼠标在画布按下，表示绘制开始。例如监听$drawingCanvas的mousedown事件，记录鼠标对应的位置为标记的初始位置pos1＝(x1,y1),标记isMouseDown＝true表示触发标记。

拖动事件可以对应于鼠标在画布中的拖动。示例性的，鼠标在isMouseDown＝true拖动时表示绘制中，监听鼠标mousemove事件，鼠标移动坐标记录为pos2＝(x2,y2)，canvas绘制出不用路径的区域，以绘制的区域为矩形区域为例，rect(x1,y1,x2-x1,y2-y1)的矩形区域。

抬起事件可以对应于鼠标在画布上抬起，表示结束绘制。示例性的，可以设置isMouseDown＝false。监听鼠标mouseup事件，鼠标点击坐标pos2＝(x2,y2),结束绘制后removeChild($drawingCanvas)，画布可以关闭，页面可以正常使用。

基于绘制操作可以得到标记区域，例如生成一个width＝x2-x1,height＝y2-y2的canvas画布，position＝absolute，left＝x1,top＝y1；设置其border，即可生成自定义绘制的标记区域。

可以理解，标记区域可以是任意形状的区域，例如圆形区域、多边型区域、不规则区域等，标记区域也可以是基于手指触摸等产生的绘制操作得到的，本申请实施例对此不作具体限定。

可以理解，在页面中可以标记多个标记区域，标记的过程可以参照S103，在此不再赘述，可选的，在绘制操作前可以清空上一次绘制结果，避免出现多次路径叠加的情况。

S104：向服务器发送所述标记区域的位置信息，所述服务器用于在所述标记区域接收到预设事件的情况下，记录所述预设事件。

本申请实施例中，每得到一个标记区域的位置信息，可以将该标记区域的位置信息上报服务器，使得后续服务器可以监听该标记区域中接收的预设事件，并记录预设事件，进而可以进行大数据分析。

可选的，所述预设事件包括下述至少一种：点击事件、滑动事件或拖拽事件。示例性的，在标记区域中接收到点击事件，可以将该标记区域对应的点击数加1。在标记区域中接收到滑动事件，可以将该标记区域对应的滑动数加1。在标记区域中接收到拖拽事件，可以将该标记区域对应的拖拽数加1。

示例性的，如图3所示，以标记区域为矩形区域为例，在用户界面的页面上，可以标记多个采用矩形框定的标记区域。需要说明的是，图3只是示例性说明标注区域，在实际应用中，该标记区域在页面中可以不显示，本申请实施例对此不作具体限定。

示例性的，以上述的矩形标记区域为例，可以将pos1＝(x1,y1)，$width＝Math.abs(x2-x1),$height＝Math.abs(y2-y1)的位置信息rect(x1,y1,$width,$height)上报服务器。

可选的，该方法还包括：接收用户输入的所述标记区域的名称；向服务器发送所述标记区域的名称。

本申请实施例中，不仅采集标记区域的位置信息，还接收用户对标记区域的命名，进而可以将接收的名称作为标记区域的key，可以理解标记区域和标记区域的名称可以是一一对应的关系。

示例性的，在采集标记区域的点击事件时，服务器可以根据终端设备上报的标记区域的key和该key对应的位置信息rect(x1,y1,$width,$height)，生成标记区域的坐标位置和形状，比如：

k1＝>{

shape:‘rect’,

pos:(x1,y1,$width,$height)

}

该条记录中标记区域为矩形框，有效区域为rect(x1,y1,$width,$height)。

为标记区域document绑定click事件,记录鼠标的位置记录为(x_1,y_1),遍历判断鼠标是否在标记区域内(x1＝<x_1<＝x1+$width&&y1＝<y_1<＝y1+$height)，如果是，则该key对应的点击数加1，如果不是不执行操作。

综上所述，本申请实施例中提供了一种页面标记的方法及装置，用户可以基于画布随意标记当前页面的任意区域，不需要依赖dom结构，也不会因为dom结构的块元素造成圈定无效区域，因此在标记区域中收集信息时，收集的信息较准确。具体的，获取页面中需要标记的容器区域；生成覆盖容器区域的画布；其中，在画布覆盖容器区域时，容器区域的页面内容对用户可见；在画布中接收绘制操作，并得到绘制操作形成的标记区域的位置信息；向服务器发送标记区域的位置信息，服务器用于在标记区域接收到预设事件的情况下，记录预设事件。即用户可以在覆盖于页面的需要标记的容器区域上的画布中进行绘制操作，进而得到绘制操作形成的标记区域的位置信息，则该标记区域是符合用户需求的标记区域，因此在标记区域中收集预设事件时，收集的预设事件较准确。

图4为本申请提供的页面标记的装置一实施例的结构示意图。如图4所示，本实施例提供的页面标记的装置包括：

获取模块41，用于获取页面中需要标记的容器区域；

生成模块42，用于生成覆盖所述容器区域的画布；其中，在所述画布覆盖所述容器区域时，所述容器区域的页面内容对用户可见；

绘制模块43，用于在所述画布中接收绘制操作，并得到所述绘制操作形成的标记区域的位置信息；

发送模块44，用于向服务器发送所述标记区域的位置信息，所述服务器用于在所述标记区域接收到预设事件的情况下，记录所述预设事件。

可选的，所述生成模块，具体用于：

获取所述容器区域相对于所述页面的第一位置信息；

将所述画布覆盖在所述容器区域上。

可选的，所述页面中包括用于触发标记页面的控件；

所述获取模块，具体用于：

可选的，所述控件为可拖拽的控件。

可选的，还包括：

接收模块，用于接收用户输入的所述标记区域的名称；

所述发送模块还用于：

向服务器发送所述标记区域的名称。

可选的，所述绘制模块具体用于：

本申请各实施例提供的页面标记的装置可用于执行如前述各对应的实施例所示的方法，其实现方式与原理相同，不再赘述。

根据本申请的实施例，本申请还提供了一种电子设备和一种可读存储介质。

如图5所示，是根据本申请实施例的页面标记的方法的电子设备的框图。电子设备旨在表示各种形式的数字计算机，诸如，膝上型计算机、台式计算机、工作台、个人数字助理、服务器、刀片式服务器、大型计算机、和其它适合的计算机。电子设备还可以表示各种形式的移动装置，诸如，个人数字处理、蜂窝电话、智能电话、可穿戴设备和其它类似的计算装置。本文所示的部件、它们的连接和关系、以及它们的功能仅仅作为示例，并且不意在限制本文中描述的和/或者要求的本申请的实现。

如图5所示，该电子设备包括：一个或多个处理器501、存储器502，以及用于连接各部件的接口，包括高速接口和低速接口。各个部件利用不同的总线互相连接，并且可以被安装在公共主板上或者根据需要以其它方式安装。处理器可以对在电子设备内执行的指令进行处理，包括存储在存储器中或者存储器上以在外部输入/输出装置(诸如，耦合至接口的显示设备)上显示GUI的图形信息的指令。在其它实施方式中，若需要，可以将多个处理器和/或多条总线与多个存储器和多个存储器一起使用。同样，可以连接多个电子设备，各个设备提供部分必要的操作(例如，作为服务器阵列、一组刀片式服务器、或者多处理器系统)。图5中以一个处理器501为例。

存储器502即为本申请所提供的非瞬时计算机可读存储介质。其中，所述存储器存储有可由至少一个处理器执行的指令，以使所述至少一个处理器执行本申请所提供的页面标记的方法。本申请的非瞬时计算机可读存储介质存储计算机指令，该计算机指令用于使计算机执行本申请所提供的页面标记的方法。

存储器502作为一种非瞬时计算机可读存储介质，可用于存储非瞬时软件程序、非瞬时计算机可执行程序以及模块，如本申请实施例中的页面标记的方法对应的程序指令/模块(例如，附图4所示的获取模块41、生成模块42、绘制模块43和发送模块44)。处理器501通过运行存储在存储器502中的非瞬时软件程序、指令以及模块，从而执行服务器的各种功能应用以及数据处理，即实现上述方法实施例中的页面标记的方法。

存储器502可以包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需要的应用程序；存储数据区可存储根据页面标记的电子设备的使用所创建的数据等。此外，存储器502可以包括高速随机存取存储器，还可以包括非瞬时存储器，例如至少一个磁盘存储器件、闪存器件、或其他非瞬时固态存储器件。在一些实施例中，存储器502可选包括相对于处理器501远程设置的存储器，这些远程存储器可以通过网络连接至页面标记的电子设备。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。

页面标记的方法的电子设备还可以包括：输入装置503和输出装置504。处理器501、存储器502、输入装置503和输出装置504可以通过总线或者其他方式连接，图5中以通过总线连接为例。

输入装置503可接收输入的数字或字符信息，以及产生与页面标记的电子设备的用户设置以及功能控制有关的键信号输入，例如触摸屏、小键盘、鼠标、轨迹板、触摸板、指示杆、一个或者多个鼠标按钮、轨迹球、操纵杆等输入装置。输出装置504可以包括显示设备、辅助照明装置(例如，LED)和触觉反馈装置(例如，振动电机)等。该显示设备可以包括但不限于，液晶显示器(LCD)、发光二极管(LED)显示器和等离子体显示器。在一些实施方式中，显示设备可以是触摸屏。

此处描述的系统和技术的各种实施方式可以在数字电子电路系统、集成电路系统、专用ASIC(专用集成电路)、计算机硬件、固件、软件、和/或它们的组合中实现。这些各种实施方式可以包括：实施在一个或者多个计算机程序中，该一个或者多个计算机程序可在包括至少一个可编程处理器的可编程系统上执行和/或解释，该可编程处理器可以是专用或者通用可编程处理器，可以从存储系统、至少一个输入装置、和至少一个输出装置接收数据和指令，并且将数据和指令传输至该存储系统、该至少一个输入装置、和该至少一个输出装置。

这些计算程序(也称作程序、软件、软件应用、或者代码)包括可编程处理器的机器指令，并且可以利用高级过程和/或面向对象的编程语言、和/或汇编/机器语言来实施这些计算程序。如本文使用的，术语“机器可读介质”和“计算机可读介质”指的是用于将机器指令和/或数据提供给可编程处理器的任何计算机程序产品、设备、和/或装置(例如，磁盘、光盘、存储器、可编程逻辑装置(PLD))，包括，接收作为机器可读信号的机器指令的机器可读介质。术语“机器可读信号”指的是用于将机器指令和/或数据提供给可编程处理器的任何信号。

为了提供与用户的交互，可以在计算机上实施此处描述的系统和技术，该计算机具有：用于向用户显示信息的显示装置(例如，CRT(阴极射线管)或者LCD(液晶显示器)监视器)；以及键盘和指向装置(例如，鼠标或者轨迹球)，用户可以通过该键盘和该指向装置来将输入提供给计算机。其它种类的装置还可以用于提供与用户的交互；例如，提供给用户的反馈可以是任何形式的传感反馈(例如，视觉反馈、听觉反馈、或者触觉反馈)；并且可以用任何形式(包括声输入、语音输入或者、触觉输入)来接收来自用户的输入。

可以将此处描述的系统和技术实施在包括后台部件的计算系统(例如，作为数据服务器)、或者包括中间件部件的计算系统(例如，应用服务器)、或者包括前端部件的计算系统(例如，具有图形用户界面或者网络浏览器的用户计算机，用户可以通过该图形用户界面或者该网络浏览器来与此处描述的系统和技术的实施方式交互)、或者包括这种后台部件、中间件部件、或者前端部件的任何组合的计算系统中。可以通过任何形式或者介质的数字数据通信(例如，通信网络)来将系统的部件相互连接。通信网络的示例包括：局域网(LAN)、广域网(WAN)和互联网。

计算机系统可以包括客户端和服务器。客户端和服务器一般远离彼此并且通常通过通信网络进行交互。通过在相应的计算机上运行并且彼此具有客户端-服务器关系的计算机程序来产生客户端和服务器的关系。

根据本申请实施例的技术方案，用户可以基于画布随意标记当前页面的任意区域，不需要依赖dom结构，也不会因为dom结构的块元素造成圈定无效区域，因此在标记区域中收集信息时，收集的信息较准确。具体的，获取页面中需要标记的容器区域；生成覆盖容器区域的画布；其中，在画布覆盖容器区域时，容器区域的页面内容对用户可见；在画布中接收绘制操作，并得到绘制操作形成的标记区域的位置信息；向服务器发送标记区域的位置信息，服务器用于在标记区域接收到预设事件的情况下，记录预设事件。即用户可以在覆盖于页面的需要标记的容器区域上的画布中进行绘制操作，进而得到绘制操作形成的标记区域的位置信息，则该标记区域是符合用户需求的标记区域，因此在标记区域中收集预设事件时，收集的预设事件较准确。

应该理解，可以使用上面所示的各种形式的流程，重新排序、增加或删除步骤。例如，本申请中记载的各步骤可以并行地执行也可以顺序地执行也可以不同的次序执行，只要能够实现本申请公开的技术方案所期望的结果，本文在此不进行限制。

上述具体实施方式，并不构成对本申请保护范围的限制。本领域技术人员应该明白的是，根据设计要求和其他因素，可以进行各种修改、组合、子组合和替代。任何在本申请的精神和原则之内所作的修改、等同替换和改进等，均应包含在本申请保护范围之内。

Claims

1.一种页面标记的方法，其特征在于，所述方法包括：

获取页面中需要标记的容器区域；

生成覆盖所述容器区域的画布；其中，在所述画布覆盖所述容器区域时，所述容器区域的页面内容对用户可见；

在所述画布中接收绘制操作，并得到所述绘制操作形成的标记区域的位置信息；

向服务器发送所述标记区域的位置信息，所述服务器用于在所述标记区域接收到预设事件的情况下，记录所述预设事件。

2.根据权利要求1所述的方法，其特征在于，所述生成覆盖所述容器区域的画布，包括：

获取所述容器区域相对于所述页面的第一位置信息；

将所述画布覆盖在所述容器区域上。

3.根据权利要求1所述的方法，其特征在于，所述页面中包括用于触发标记页面的控件；

所述获取页面中需要标记的容器区域，包括：

4.根据权利要求3所述的方法，其特征在于，所述控件为可拖拽的控件。

5.根据权利要求1-4任一项所述的方法，其特征在于，还包括：

接收用户输入的所述标记区域的名称；

向服务器发送所述标记区域的名称。

6.根据权利要求1-4任一项所述的方法，其特征在于，所述在所述画布中接收绘制操作，并得到所述绘制操作形成的标记区域的位置信息，包括：

7.根据权利要求1-4任一项所述的方法，其特征在于，所述标记区域的位置信息为所述标记区域相对于所述容器区域的位置信息。

8.根据权利要求1-4任一项所述的方法，其特征在于，所述预设事件包括下述至少一种：点击事件、滑动事件或拖拽事件。

9.一种页面标记的装置，其特征在于，包括：

获取模块，用于获取页面中需要标记的容器区域；

10.根据权利要求9所述的装置，其特征在于，所述生成模块，具体用于：

获取所述容器区域相对于所述页面的第一位置信息；

将所述画布覆盖在所述容器区域上。

11.根据权利要求9所述的装置，其特征在于，所述页面中包括用于触发标记页面的控件；

所述获取模块，具体用于：

12.根据权利要求11所述的装置，其特征在于，所述控件为可拖拽的控件。

13.根据权利要求9-12任一项所述的装置，其特征在于，还包括：

接收模块，用于接收用户输入的所述标记区域的名称；

所述发送模块还用于：

向服务器发送所述标记区域的名称。

14.根据权利要求9-12任一项所述的装置，其特征在于，所述绘制模块具体用于：

15.根据权利要求9-12任一项所述的装置，其特征在于，所述标记区域的位置信息为所述标记区域相对于所述容器区域的位置信息。

16.根据权利要求9-12任一项所述的装置，其特征在于，所述预设事件包括下述至少一种：点击事件、滑动事件或拖拽事件。

17.一种电子设备，其特征在于，包括：

至少一个处理器；以及与所述至少一个处理器通信连接的存储器；其中，所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行如权利要求1-8任一项所述的方法的指令。

18.一种存储有计算机指令的非瞬时计算机可读存储介质，其特征在于，计算机指令用于使所述计算机执行如权利要求1-8任一项所述的方法。