CN104881478A - 一种网页页面定位识别系统及定位识别方法 - Google Patents

Abstract

本发明涉及一种网页页面定位识别系统及定位识别方法，该系统包括初始化模块、类型识别模块、标记模块、碰撞检测模块、坐标转换模块和输入输出接口，通过初始化网页元素和识别网页元素类型后生成中间检测列表，将其中的元素与监听到的当前用户视线聚焦区域进行碰撞，将重叠的网页元素本身及其ID标记、位置/时间数据一并列表输出以供用户及技术实施者操作。可精确对应具体网页中具体元素的具体位置，根据当前用户关注焦点展示相关信息或触发相关事件，从而使信息展示更具针对性，位置信息采用相对位置，不受网页元素位置/大小、载体的尺寸和分辨率的影响，输出的位置信息始终正确且唯一。

Description

一种网页页面定位识别系统及定位识别方法

技术领域

本发明涉及一种网页页面的定位识别方法，以及一种网页页面的定位识别系统。

背景技术

网络作为信息传输、接收、共享的虚拟平台，把各个点、面、体的信息联系到一起，从而实现这些资源的共享。它是人们信息交流使用的工具，也是资源共享的通道。随着网络的迅猛发展，它的功能越来越多，内容也越来越丰富。网络借助文字阅读、图片查看、影音播放、下载传输、游戏聊天等软件工具从文字、图片、声音、视频，等方面给人们带来极其丰富和美好的使用和享受，极大的丰富了人们的生活。

网页是构成网站的基本元素，是承载各种网站应用的平台。文字与图片是构成一个网页的两个最基本的元素。除此之外，网页的元素还包括动画、音乐、程序等等。一个网页可能包含丰富的内容，往往需要用户通过横向/竖向的滚动/滑动方式才能完整浏览。如何在一个文字、图片、视频、音频单一/相互混合的网页中，当用户滚动/滑动网页/网页中的一部分时，向用户展示其正在关注内容的相关信息，触发动画/音/视频播放，促进用户参与评论，标记，进而知晓用户更关注哪一块内容，甚至是内容中的哪一部分是本领域亟需解决的技术难题。

目前对于网页页面的定位识别方法或是基于图片的评论展示方案，即用户选择一张图片发表评论，系统将评论通过左右/上下滚动，或随机的方式展示在图片上。或是采用图片标记方案，即用户通过上一张，下一张，或图片列表，选择一张图片，选择图片上的位置发表评论或进行标记，然后系统将评论或标记展示按照坐标展示在图片上。或是采用基于播放时间的视频评论方案，即用户打开一个视频，在视频播放当前位置处发表评论后，系统将评论按照视频播放时间展示。亦或是采用网页弹幕方案，即用户进入一个网页发表评论，系统将评论以横向/竖向滚动等其他方式展现。

基于图片的评论展示方案评论不能与图片的具体位置对应，且图片上直接展示评论，将影响图片本身观感。图片标记方案一屏只展现一张图片，且在图片上直接展示评论，不但影响图片本身观感，也无法适应大多数网页图文混排情况，多图混合时，需要将多张图片合成整体；而且该法提取的位置为相对图片坐标，但未考虑到图片尺寸变化情况，在开发网页的手机/平板等版本时，开发者需要手动或编写程序由系统对坐标进行换算，产生额外的开发成本及资源消耗。基于播放时间的视频评论方案当网页中存在多个视频时，用户需要自己选择一个视频评论，无法适应图文、音频、视频混排的网页，且在视频中直接显示评论，可能影响视频观感。网页弹幕方案用户评论的对象是整个网页，而网页中往往存在多个元素，每个用户的关注点并不完全相同。鉴于网页弹幕(即滚动评论)会影响用户观看网页，大多数情况，需要用户刻意地去打开网页弹幕观看。

发明内容

针对现有技术的缺陷，本发明的目的是提供一种将识别和定位融入到用户日常滚动浏览网页中、适应一屏多图、图文混排、多媒体混排，储存信息唯一的网页页面定位识别方法。

本发明的另一目的是提供一种网页页面定位识别系统。

为达上述目的，本发明采用了以下技术方案：

一种网页页面定位识别方法，其包括如下步骤：

(1)网页元素初始化：遍历网页或指定网页上某一区域中的全部网页元素，生成初始化检测列表，并创建对该网页或指定网页上的某一区域被滚动/滑动的监听，设定屏幕上的某一区域为用户视线聚焦区域；(2)识别网页元素类型：判断全部网页元素类型，去除广告和噪音元素；

(3)生成中间检测列表：将识别完类型的网页元素分别进行唯一身份识别的元素ID标记，并将标记后的网页元素生成中间检测列表；

(4)碰撞检测：将中间检测列表中的元素与监听到的当前用户视线聚焦区域进行碰撞，判断并输出重叠元素ID标记、图片/文字位置或音/视频时间，生成最终输出列表。

本发明还可采用以下技术方案进一步实现：

所述的网页页面定位识别方法，其中，所述步骤(4)采用以下方式确定中间检测列表与监听到的当前用户视线聚焦区域相重叠：

A.将中间检测列表中的元素在网页中的坐标、宽度、高度构成一个矩形区域；

B.设定当前用户视线聚焦区域与A中元素矩形区域中心的水平间距为L，竖直间距为L’；视线聚焦区域与元素对角相切时，两者中心的水平间距为L₀，两者中心的竖直间距L₀’；

C.当L<L₀且L’<L₀’时，判定用户视线聚集区域与网页元素相碰撞，即两者重叠。

所述的网页页面定位识别方法，其中，判定用户视线聚集区域与网页元素相碰撞后，对于图片和文字元素，获取其在网页中的绝对坐标，将其转化为相对坐标后，与图片/文字元素以及各自的元素ID形成最终图文输出列表；对于音/视频元素，获取当前时间并与网页元素中的音/视频元素及其对应的元素ID共同形成最终音/视频输出列表。

所述的网页页面定位识别方法，其中，所述用户视线聚焦区域的相对纵坐标以下列公式(1)计算获得：

H₃＝H₁+H₀-H₂,              (1)

其中，H₀为垂直滚动/滑动时被滚动网页的顶端到屏幕最上部的高度，H₁为用户视线聚焦区域距离屏幕上方的高度，H₂为与用户视线聚焦区域相碰撞的网页元素顶部到被滚动/滑动网页最上部的高度，H₃为用户视线聚焦区域的相对重叠元素的纵坐标；

所述用户视线聚焦区域的相对横坐标以下列公式(2)计算获得：

W₃＝W₁+W₀-W₂                (2)

其中，W₀为水平滚动/滑动时被滚动网页的最左端到屏幕最左侧的长度，W₁为用户视线聚焦区域距离屏幕左侧的长度，W₂为与用户视线聚焦区域相碰撞的网页元素左侧到被滚动/滑动网页左侧的长度，W₃为用户视线聚焦区域的相对重叠元素的纵坐标。

所述的网页页面定位识别方法，其中，设定与用户视线聚焦区域相碰撞的网页元素的当前高度为H，当前宽度为W，先将用户视线聚焦区域的相对坐标转换为其相对于网页元素的百分比坐标(X,Y)，再与图片/文字元素以及各自的元素ID形成最终图文输出列表，所述用户视线聚焦区域的百分比坐标(X，Y)通过下列公式(3)和(4)计算获得：

Y＝H₃/H*100            (3)

X＝W₃/W*100            (4)。

所述的网页页面定位识别方法，其中，所述步骤(1)中用户视线聚焦区域由人为设定，或者由鼠标/眼球追踪器等输入设备实时设定或传入；

所述步骤(2)中识别网页元素类型先检查接收到的网页元素是否已经存在标记，且标记中能够提取出类型信息，如是，跳过判断，如否，通过该元素的HTML标签、所加载的文件路径、扩展名或content-type头来判断类型；

所述步骤(3)中唯一身份识别的元素ID通过如下方式标记：接收识别完类型的网页元素，检查该元素是否存在标记且标记中能够提取出唯一身份识别标识符，若是，将其类型与唯一身份识别标识符组合标记到元素上，记做元素ID；如否，按网页元素传送的先后顺序或日期时间生成元素唯一身份识别标识符并与其类型组合标记到元素上，记做元素ID。

本发明还提供了一种网页页面定位识别系统，包括初始化模块、类型识别模块、标记模块、碰撞检测模块、坐标转换模块和输入输出接口，其中，

初始化模块，用以监听当前用户对指定网页/网页中的某一区域的滚动或滑动操作，遍历提取指定网页/网页中的某一区域中的全部网页元素，生成初始化检测列表,设定屏幕上的某一区域为用户视线聚焦区域；

类型识别模块，用以接收初始化化模块提取的全部网页元素，判断网页元素类型，去除广告和噪音元素，将图片、文字及音/视频网页元素及元素类型提交给标记模块；

标记模块，用以接收类别识别模块提交的网页元素及元素类型，为每个网页元素生成唯一可识别的元素ID，并生成中间检测列表；

碰撞检测模块，用以接收标记模块提交的中间检测列表和初始化模块获取的当前用户视线聚焦区域，提取中间检测列表中与当前用户视线聚焦区域发生重叠的网页元素，对于图片/文字类型的重叠元素，获取图片/文字元素的绝对坐标并提交坐标转换模块处理，对于音/视频类型的重叠元素，连同其对应的元素ID提交输入输出接口；

坐标转换模块，用以接收图片和文字元素的绝对坐标，将该坐标转换成视线聚集区域相对于元素本身的相对坐标，并根据元素本身的长度和宽度，将坐标转换成相对于元素本身的百分比坐标，并将图片和文字元素、各自的元素ID连同元素的百分比坐标形成最终图文输出列表；

输入输出接口，用以获取音/视频的时间，并与自碰撞检测模块对应获取的音/视频元素及其元素ID形成最终音视频输出列表，获取坐标转换模块形成的最终图文输出列表，输出最终音视频输出列表及最终图文输出列表。

进一步地，所述的网页页面定位识别系统，其中，所述初始化模块中的用户视线聚焦区域由人为设定，或者由鼠标/眼球追踪器等输入设备实时设定或传入；

所述坐标转换模块接收图片/文字类型元素的绝对坐标，将该坐标先转换成视线聚焦区域相对于元素本身的相对坐标，再根据元素本身的长度和宽度，将相对坐标转换成相对于元素本身的百分比坐标。

所述的网页页面定位识别系统，其中，所述元素ID为网页元素的唯一身份识别符和元素类型组成的名称；所述输入输出接口包括输入接口和输出接口，输入接口用于获取音/视频时间，输出接口用于输出与用户视线聚焦范围重叠的元素ID、重叠区域在图片/文字元素上的具体位置以及音/视频具体时间。

所述的网页页面定位识别系统，其还包括回调接口和最接近判别模块，其中，回调接口，用以接收当前用户视线聚焦区域内的最终音视频列表及最终图文输出列表，提交数据库、展示评论或展示相关信息；最接近判别模块，用以接收最终图文输出列表，选择最接近当前用户视线聚焦区域内的元素及该元素上的最接近当前用户视线聚焦区域位置，将其相关信息展示给用户并回传给回调接口。

本发明以具体的网页中元素为对象，识别出当前位于用户视线聚焦区域内的主体元素的类型是文字、图片、视频，还是音频。根据其类型，进一步定位出当前用户正在观看/产生交互的，是文字/图片区域上的哪个位置(坐标)，还是视频/音频的当前播放位置(时间)。从而便于将用户评论、弹幕与网页中具体元素的具体位置精确对应，根据当前用户关注具体元素的具体位置展示相关信息、广告，触发动画/音/视频播放等。使得信息展示更有针对性，极大的降低了视觉噪音。

本发明将信息的展示与用户滚动的操作结合起来，输出位置/时间信息后，可有开发者自主决定如何展示评论或相关信息，触发何种事件，无需用户刻意开启，使用更加灵活方便，如滚动到网页中的图片的某一位置，输出对应的评论、标记，滚动到网页中的视频，则该视频自动播放等，滚出时，则播放暂停

本发明所输出的具体位置信息，均为相对位置，且与元素本身绑定，区别于绝对定位，即使页面的中的元素位置、大小发生变化，甚至移动到其它页面中，只要其比例保持不变，无论用户上网设备(手机/平板/电视/电脑/智能手表)的尺寸，分辨率如何，本技术输出的具体位置信息始终正确且唯一。

附图说明

此处所说明的附图用于提供对本发明的进一步理解，不构成对本发明的不当限定。

图1为本发明的网页页面定位识别方法流程图。

图2为本发明的网页页面识别系统中碰撞检测示意图。

图3为本发明的网页页面识别系统中相对坐标换算示意图。

具体实施方式

本发明中具体涉及到的技术术语介绍如下：

①元素

网页中的HTML标签，如<img><video><audio><embed><div><a><p>等，除了<img>一定对应图片，反之则不然，在新标准(HTML5)中，<video><audio>一定对应视频和音频，反之则不然，除<br>等表示换行等纯结构性标识外，其余标签中，均可能包含文字、视频、音频、图片、动画、插件及其混合组合。

本发明操作的对象，即是元素。包括如何从网页/网页的某一区域所包含的全部元素中，提取出文字、图片、视频、音频元素，当用户横向或竖向滚动/滑动网页时，如何判断位于用户视线聚焦区域内的元素是哪一个，或哪几个，具体到用户正在关注的是文字/图片元素的哪个位置，视频/音频元素的哪个时间点。技术实施者可根据这些信息，确定用户感兴趣的内容，提供用户针对某一位置，某一时间发表评论/标记的功能，并在网页/网页的某一块被滚动/滑动到指定位置时，显示相关信息或提供相关功能，如用户评论，购买方式，具体人名等。

②用户视线聚焦区域

用户当前所关注的屏幕上某一区域，可由设备录入(如眼球追踪设备)、用户指定(用户通过触摸、点击的方式进行选择)、技术实施者人为设定，本发明实施例中默认将屏幕的正中央作为用户视线聚焦区域。

用户或技术实施者可对与视线聚焦范围发生重叠元素，及元素上的某一位置(文字/图片)，元素的某一时间点(视频/音频)，发表评论，标记等。

当网页/网页的某一区域被滚动/滑动到该元素及该元素上对应位置(文字/图片)或对应时间点(视频/音频)时，将显示相应的评论、标记，触发相应的事件。

③网页

网页狭义上指网站中的一个页面，由于本发明的跨平台兼容特性。本发明中的网页也包括手机/平板/智能手表应用中的内页。

④唯一身份标识符

唯一身份标识符，即为元素的独一无二的名称。在一个网页中，并不是所有元素都有名称。本技术会根据元素不会发生改变的特征，为符合条件的元素生成一个独一无二的名称。技术实施者，亦可人工为元素命名，但需确保该名称具有唯一性。

⑤ID

ID在本技术中特指，将唯一身份标识符与元素类型组合而成的名称。故ID具有唯一性，且能从ID中直接读出元素类型，所以对于通过本技术构建系统已经识别过的元素，无需再次判断类型。若网页上的元素类型为图片/文字/视频/音频中的一种，或技术实施者希望单独存储元素类型，亦可直接采用唯一身份标识符作为ID。

ID是一个元素在本技术所构建系统中的唯一标识。当检测到位于当前用户视线聚焦区域的元素时，本技术所构建系统可获取元素ID+具体位置或元素ID+具体时间，并输出给其他系统。

在下文的描述中，给出了大量具体的细节以便提供对本发明更为彻底的理解。然而，对于本领域技术人员来说显而易见的是，本发明可以无需一个或多个这些细节而得以实施。在其他的例子中，为了避免与本发明发生混淆，对于本领域公知的一些技术特征未进行描述。

参见图1所示，本发明提供一种网页页面定位识别系统及其定位识别方法，该网页页面定位识别方法包括如下步骤：

(1)网页元素初始化：遍历网页或指定网页上的某一区域中的全部网页元素，生成初始化检测列表，并创建对该网页或指定网页上的某一区域被滚动/滑动的监听，设定屏幕上的某一区域为用户视线聚焦区域，或者由鼠标、眼球追踪等输入设备实时设定/传入这一区域；

(2)识别网页元素类型：判断全部网页元素类型，去除广告和噪音元素；

(3)生成中间检测列表：将识别完类型的网页元素分别进行唯一身份识别的元素ID标记，并将标记后的网页元素生成中间检测列表；

(4)碰撞检测：将中间检测列表与监听到的当前用户视线聚焦区域进行碰撞，判断并输出重叠的元素ID标记、重叠区域在图片/文字类型元素上的位置或音/视频类型元素当前的播放时间信息，生成最终输出列表。

优选的，所述步骤(4)采用以下方式确定中间检测列表与监听到的当前用户视线聚焦区域相重叠：

A.将中间检测列表中的元素在网页中的坐标、宽度、高度构成一个矩形区域；

B.设定当前用户视线聚焦区域与A中元素矩形区域中心的水平间距为L，竖直间距为L’；视线聚焦区域与元素对角相切时，两者中心的水平间距为L₀，两者中心的竖直间距L’₀；

C.当L<L₀且L’<L’₀时，判定用户视线聚集区域与网页元素相碰撞，即两者重叠。

进一步的，判定用户视线聚集区域与网页元素相碰撞后，对于图片和文字元素，获取其在网页中的绝对坐标，将其转化为相对坐标后，与图片/文字元素以及各自的元素ID形成最终图文输出列表；对于音/视频元素，获取当前播放时间并与网页元素中的音/视频元素及其对应的元素ID共同形成最终音/视频输出列表。

所述用户视线聚焦区域的相对纵坐标可以下列公式(1)计算获得：

H₃＝H₁+H₀-H₂,              (1)

其中，H₀为垂直滚动时被滚动/滑动网页的顶端到屏幕最上部的高度，H₁为用户视线聚焦区域距离屏幕上方的高度，H₂为与用户视线聚焦区域相碰撞的网页元素顶部到被滚动/滑动网页最上部的高度,H₃为用户视线聚焦区域的相对重叠元素的纵坐标；

所述用户视线聚焦区域的相对横坐标以下列公式(2)计算获得：

W₃＝W₁+W₀-W₂              (2)

其中，W₀为水平滚动时被滚动/滑动网页的最左端到屏幕左侧的长度，W₁为用户视线聚焦区域距离屏幕左侧的长度，W₂为与用户视线聚焦区域相碰撞的网页元素左侧到被滚动/滑动网页左侧的长度，W₃为用户视线聚焦区域的相对重叠元素的纵坐标。

为了使输出的坐标位置始终正确且唯一，优选设定与用户视线聚焦区域相碰撞的网页元素的当前高度为H，当前宽度为W，先将用户视线聚焦区域的相对坐标转换为其相对于网页元素的百分比坐标，再与图片/文字元素以及各自的元素ID形成最终图文输出列表，所述用户视线聚焦区域的百分比坐标X、Y通过下列公式(3)和(4)计算获得：

Y＝H₃/H*100            (3)

X＝W₃/W*100            (4)。

优选的，步骤(2)中识别网页元素类型先检查接收到的网页元素是否已经存在标记，且标记中能够提取出类型信息，如是，跳过判断，如否，通过该元素的HTML标签、所加载的文件路径、扩展名或content-type头来判断类型；

优选的，步骤(3)中唯一身份识别的元素ID通过如下方式标记：接收识别完类型的网页元素，检查该元素是否存在标记且标记中能够提取出唯一身份识别标识符，若是，将其类型与唯一身份识别标识符组合标记到元素上，记做元素ID；如否，按网页元素传送的先后顺序或日期时间生成元素唯一身份识别标识符并与其类型组合标记到元素上，记做元素ID。

本发明的网页页面定位系统，参见图1所示，包括初始化模块1、类型识别模块2、标记模块3、碰撞检测模块4、坐标转换模块5、输入接口6和输出接口7，其中：

初始化模块1，用以监听当前用户对指定网页/网页上某一区域的滚动或滑动操作，并遍历提取指定网页/网页上某一区域中的全部网页元素，生成初始化检测列表，设定屏幕上的某一区域为用户视线聚焦区域，或者由鼠标、眼球追踪等输入设备实时设定/传入这一区域；

类型识别模块2，用以接收初始化化模块1提取的全部网页元素，判断网页元素类型，去除广告和噪音元素，将图片、文字及音/视频网页元素及元素类型提交给标记模块3；

标记模块3，用以接收类别识别模块2提交的网页元素及元素类型，为每个网页元素生成唯一可识别的元素ID，并生成中间检测列表；

碰撞检测模块4，用以接收标记模块3提交的中间检测列表和初始化模块1获取的当前用户视线聚焦区域，提取当前用户视线聚焦区域内的网页元素与中间检测列表发生重叠的网页元素，对于重叠的网页元素中的图片和文字元素，获取图片和文字元素的绝对坐标并提交坐标转换模块5处理，重叠的网页元素中的音/视频元素连同其对应的元素ID提交输入输出接口6/7；

坐标转换模块5，用以接收图片和文字元素的绝对坐标，将该坐标转换成视线聚集区域相对于元素本身的相对坐标，并根据元素本身的长度和宽度，将坐标转换成相对于元素本身的百分比坐标，并将图片和文字元素、各自的元素ID连同元素百分比坐标形成最终图文输出列表；

输入输出接口6/7，自输入接口6获取音/视频的时间，并与自碰撞检测模块4对应获取的音/视频元素及其元素ID形成最终音视频输出列表，获取坐标转换模块5形成的最终图文输出列表，通过输出接口7输出最终音视频输出列表及最终图文输出列表。

优选的，坐标转换模块5接收图片/文字类型元素的绝对坐标，将该坐标先转换成视线聚焦区域相对于元素本身的相对坐标，再根据元素本身的长度和宽度，将相对坐标转换成相对于元素本身的百分比坐标。

其中，元素ID为网页元素的唯一身份识别符和元素类型组成的名称。

输入输出接口包括输入接口6和输出接口7，输入接口6用于获取音/视频时间，输出接口7用于输出与用户视线聚焦区域发生重叠的元素ID、在图片/文字元素上的具体位置以及音/视频具体时间。输出当前用户视线聚焦的元素ID及具体位置信息/时间信息,技术实施者可以自行决定在获取上述信息后进行怎样的操作，如将信息提交到数据库，或者展示一条评论，或展示该位置相关的信息、广告，或触发某一项事件等。

优选的，还可在系统中增加设置回调接口8和最接近判别模块9，其中，回调接口8用以接收当前用户视线聚焦区域内的最终音视频列表及最终图文输出列表，提交数据库、展示评论或展示相关信息；最接近判别模块9用以接收最终图文输出列表，选择最接近当前用户视线聚焦区域内的元素及该元素上的最接近当前用户视线聚焦区域位置，将其相关信息展示给用户并回传给回调接口。

下面对各模块进行更详尽的说明：

1、初始化模块

在初始化模块中，通过设备输入或者手动设定的方式，确定当前用户视线聚焦在屏幕中的哪一区域，本实施例默认为用户屏幕的正中央区域，具体操作中，可以设定屏幕上的某一区域为用户视线聚焦区域，或者由鼠标、眼球追踪等输入设备实时设定/传入这一区域。

初始化模块，用以遍历当前网页或指定网页上的某一区域中包含的全部元素，可以按照从上往下，从左往右的顺序遍历网页或或指定网页上的某一区域中的元素。遍历元素的同时生成初始化检测列表，并将初始化检测列表交于类型识别模块进行下一步处理。为了加快遍历网页的速度，可以先行判断用户视线聚焦区域在整个网页中的大体位置，依据该位置靠近网页顶端，还是底端，决定遍历的顺序(从上往下寻找/从下往上寻找)，并指定从距离指定区域最接近的元素开始找起。当网页中充满数百张图片，视频，音频，文字混排时，依然可以保障效率和性能。

同时，初始化模块还创建了对指定网页/网页中某一区域的监听，当用户对网页/网页中的某一区域滚动/滑动操作时，根据这些操作所产生的网页/网页中的一部分在屏幕上显示位置的变化，交由碰撞检测模块，检测当前位于屏幕，用户视线范围内的元素是哪一个或几个(元素ID)，用户关注的是元素上的哪一处(图片/文字)，或是元素上的哪一个时间点(视频/音频)。保证用户每一次的滚动/滑动都能触发碰撞检测模块。

2、类型识别模块

用以接收初始化化模块提取的全部网页元素，判断网页元素类型，去除广告和噪音元素，将图片、文字及音/视频网页元素及元素类型提交给标记模块。

具体操作时，类型识别模块接收初始化模块传递过来的元素，检查该元素是否已存在标记，且标记中能够提取出类型信息，若可以，则跳过判断。若不能，则根据技术实施者定义的判断层级，可仅仅判断该元素的HTML标签，也可进一步判断所加载的文件路径、扩展名或content-type头，判断类型。

提取或判断出元素类型后，模块将非噪音元素及类型提交给标记模块进行标记。

具体判断的方法及顺序如下：

图片的判断：

一级判断：HTML标签为IMG

二级判断：扩展名为jpg/png/gif/bmp等，content-type为image/x-png、image/png、image/pjpeg、image/jpeg、image/bmp等，若扩展名不存在，或扩展名与content-type冲突，考虑到扩展名可以方便的人工改变，以content-type为准。

技术实施者可以指定文件路径符合某一规则的文件即为图片，如果来自某图片网站，即路径包含image.xxx.com下的文件，均为图片，无需系统检测。

视频的判断：

一级判断：标签为embed/object(强制进行二级判断)/video

二级判断：扩展名为mp4/flv/f4v/wmv/WebM等(点播)，或者采用rtp/rtcp/rtsp/rtmp/mms/hls开头(直播)

技术实施者可以指定文件路径符合某一规则的文件即为视频，如果来自某视频网站的swf均为视频，无需系统判断。

音频的判断：

一级判断：标签为embed/object(强制进行二级判断)/audio

二级判断：扩展名为mp3/midi/ogg等

技术实施者可以指定文件路径符合某一规则的文件即为音频，如果来自某音频网站的swf均为音频，无需系统判断。

噪音的判断：

若元素没有加载任何文件，或根据已公开的特征库，确认加载文件属于广告或单纯辅助结构元素，则判断为噪音。

文字的判断：

该区域不是噪音，且排除图片/音频/视频后剩余的不为空的文字部分，则判断为文字。

3、标记模块

标记模块用以接收网页元素及元素类型，为每个元素生成可被系统识别的ID，并生成中间检测列表。

该模块检测是否存在唯一身份标识符，若没有，则根据指定规则生成唯一身份标识符，并将唯一身份标识符与元素类型，组成元素名称，标记为元素ID。然后将元素放入中间检测列表中，将列表提交给碰撞检测模块。

具体标记时，可按照类型识别模块传送的顺序，将非噪音元素按照先后，用可以反映出顺序的字符，如数字大小、日期时间先后，标记到元素上，记为顺序标记。图片/视频/音频元素，根据当前加载文件路径/加载的文件名，提取md5/base64值的全部或部分，作为ID，只要加载路径不变/加载的文件名不变，即可保证对该元素的唯一识别。将该ID与类型组合成新ID标记到元素上,记为ID标记。

将标记后元素逐一放入中间检测列表，待最后一个元素标记完成后，将中间检测列表提交给碰撞检测模块。

4、碰撞检测模块

碰撞检测模块接收中间检测列表以及初始化模块获取的当前用户视线聚焦区域，检查列表中的元素是否与用户视线聚集区域相碰撞(即相接)。

判断与当前用户视线聚集区域发生重叠的是哪个元素，可以根据ID中标记的元素类型：若为图片/文字，则获取用户视线聚集区域在这个元素上的绝对坐标，与元素ID，位置一起交由坐标转换模块处理。若为音频/视频，则通过输入输出接口中的输入部分获取用户视线聚集区域在这个元素(视频/音频)上的时间信息，与元素ID一起，通过输入输出接口的输出部分输出。

该模块会追踪用户滚动(含滑动，下同)轨迹，实时监测。根据用户最近两次的滚动轨迹，判断用户的滚动方向，最近两次纵坐标增加，向下滚动，反之向上，横坐标增加，向右滚动，反之向左。再根据最近一次发生重叠的元素的顺序标记，若用户向上/左滚动，则只从该顺序标记起，递减遍历元素，若用户向下/右滚动，则只从该顺序标记起，递增遍历元素。(如最近一次发生重叠的元素的顺序标记为9，用户向上滚动，则从9开始，递减遍历顺序标记为8，7，6……直到1的元素，如顺序标记为5，用户向右滚动，则从5开始，递增遍历顺序标记为6，7，8……直到顺序标记最大的元素)

将中间检测列表中的元素在网页中的坐标、宽度、高度，构建一个矩形区域，检测该区域是否与用户视线聚焦区域重叠，即判断用户视线聚焦区域在元素上：参见图2所示：

①计算如果视线聚焦区域与元素对角相切(并列)时，两者中心的水平间距L₀，两者中心的竖直间距L₀'；

②计算当前视线聚焦区域与元素中心的的水平间距L，竖直间距L’

L<L₀：两者在水平方向上投影重叠

L＝L₀：两者在水平方向上投影相连

L>L₀：两者在水平方向上投影不相连

L’<L₀'：两者在竖直方向上投影重叠

L’＝L₀'：两者在竖直方向上投影相连

L’>L₀'：两者在竖直方向上投影不相连

③只有L<L₀并且L’<L₀'，可以判断视线聚集区域与元素碰撞，即两者发生重叠。

此时，若重叠元素类型为视频/音频，则发送元素至输入输出接口，获取当前播放时间，与元素ID，一起自输入输出接口输出。若类型为图片/文字，则将元素和指定用户视线聚焦区域发至坐标转换模块，等候处理数据返回，与元素ID一起输出至输入输出接口。

5、坐标转换模块

接收图片/文字类型元素的绝对坐标，将该坐标转换成视线聚集区域相对于元素本身的相对坐标，并根据元素本身的长度和宽度，将坐标转换成相对于元素本身的百分比坐标。

将元素ID，百分比坐标通过输入输出接口的输出部分输出。

参见图3所示，坐标转换模块自碰撞模块处接收图片/文字类型网页元素和用户视线聚焦区域，

当网页垂直滚动(含滑动，下同)时，已经滚动到屏幕上部的网页高度可直接获取H₀，即为垂直滚动时被滚动网页顶端到屏幕最上部的高度；

当网页水平滚动时，已经滚动到屏幕左部的网页长度可直接获取W₀，即为网页水平滚动时滚动网页最左端到屏幕左侧的长度；

此时，用户视线聚焦区域的纵坐标，代表其距离屏幕的高度H₁

此时，用户视线聚焦区域的横坐标，代表其距离屏幕的长度W₁

网页元素的纵坐标，代表其距离网页最顶部的高度H₂

网页元素的横坐标，代表其距离网页最左部的长度W₂

用户视线聚焦区域距离元素左上角的高度H₃＝H₁+H₀-H₂

用户视线聚焦区域距离元素左上角的长度W₃＝W₁+W₀-W₂

H₃，W₃即为网页元素当前宽度时，用户视线聚焦区域相对于网页元素的坐标。

为了使输出的用户视线聚焦区域的具体位置信息始终正确且唯一，从而无论客户讲该信息输出至不同尺寸不同分辨率的设备中使用，可以将H₃，W₃分别转换成其相对元素当前高度与当前宽度的百分比Y，X，即使元素宽度、高度发生变化，只要宽高比例保持不变，百分比Y，X对应元素上的位置就不会变化。

元素当前高度为H

元素当前宽度为W

H₃占元素高度H的百分比(0-100)，Y＝H₃/H*100

W₃占元素宽度W的百分比(0-100)，X＝W₃/W*100

特别地，乘以100，是避免小数点后位数太多，造成传输和存储的不变。不乘或乘以其他数字亦可。

例如，图片的宽度为1000像素，高度为2000像素，用户正在观看图片上的人物头部，用户视线聚焦区域相对于元素的坐标，即相对坐标为(500像素，200像素)，输出并被技术实施者通过其他系统存储于数据库。

当用户使用手机查看这张图片时，图片被等比例放缩，宽度变为200像素，高度变为400像素，数据库中存储的相对坐标(500像素，200像素)无法直接对应到缩小后的图片上。需要知晓图片之前的宽高，需进行换算，方可对应到人物的头部。

而若将相对坐标转化为百分比坐标，将获取的相对坐标除以图片当前的宽度和高度，将得到的比值再输出存储于数据库。

同上例，图片的宽度为1000像素，高度为2000像素，用户正在观看图片上的人物头部，用户视线聚焦区域在元素上的相对坐标为(500像素，200像素)，按照优化公式，变为(500/1000×100，200/2000×100)，即(50，10)，输出并被技术实施者通过其他系统存储于数据库。

当用户使用手机查看这张图片时，图片被等比例放缩，宽度变为200像素，高度变为400像素，数据库中存储的相对坐标比值为(50，10)，而当前图片宽高已知，只需相乘除以100，即可获得当前用户视线聚焦区域在元素上的相对坐标应为(50×200/100像素，400×10/100像素)，即(100像素，40像素),无需知晓图片之前的宽高，便可对应到图片中人物的头部。

经此步骤，可以使技术应用范围更广，兼容性更强，并降低了技术实施者的在兼容上所花费的成本。

6、输入输出接口

该输入输出接口包含两个接口，一个是输入接口，负责获取视频/音频时间，另一个是输出接口，通过本技术构建系统的其他模块，或其他系统可以通过本接口获取与当前用户视线聚焦区域发生重叠的元素ID，及该区域相对于重叠元素(图片/文字)上的具体位置，或(视频/音频)具体时间。

为了后续操作方便，本系统还可设置回调接口和最接近判别模块。在回调接口中，技术实施者可自行决定在获取信息后，进行怎样的操作。当技术实施者需要实现评论/标记内容与图片/文字滚动(含滑动，下同)位置同步时，可以在回调接口中，使用最接近判别模块得到与当前图片/文字被滚动到的位置相关的一组评论。最接近判别模块接收包含图片/文字的位置和相应信息的列表。用于在用户滚动/滑动网页时，从列表中选择位置最接近当前的用户视线聚集区域的元素及该元素上的最接近当前用户视线聚焦区域位置，对其相关信息予以展示。具体操作时，技术实施者可为当前模块设置一个值，或者默认由模块记录用户最近N次滚动操作中(N可设置)的坐标，并求出相邻两次横向及竖向滚动距离的距离，从中找出最小值。从而指定或由系统确定用户当前滚动、滑动一次操作的水平步距L_X，竖直步距L_Y。

模块从列表中找出位置(X，Y)在区间([X-L_X，X)，[Y-L_Y，Y))中对象，并将对象列表返回给回调接口。

由于设备不同，软件不同，甚至是用户滚动鼠标滚轮，滑动屏幕的力度等的不同，网页被单次滚动/滑动操作所移动的最小距离不尽相同。将出现以下问题：

假定列表为：{{图片1-(0,1)-评论1},{图片1-(0,3)-评论2},{图片1-(0,5)-评论3}}，前面为图片1上的位置，后面为与图片1的具体位置(横坐标，纵坐标)(乘以100后的百分比坐标)对应的评论。

当单次移动最小距离为1时，用户每次滚动/滑动的纵坐标的变化为{0,1,2,3,4,5},则三条评论均可以被展现。

当单次移动最小距离为1.5时，用户每次滚动/滑动的纵坐标的变化为{0,1.5,3,4.5,6},则只有评论2可以被展现。

当单次移动最小距离为2时，用户每次滚动/滑动的纵坐标的变化为{0，2，4，6，8}，则三条评论均未能展现。

但事实是，用户在滚动/滑动的过程中，已经经过并看到了图片1的未能展现评论的位置。

为了避免此问题，最接近判别模块引入误差步距的概念，把单次移动最小距离定为误差步距。具体是：

该误差步距可由技术实施者自行设置或默认依赖本技术实施系统的自动检测，确定用户每滚动/滑动一次时，最小移动距离，即步距，将该步距算作误差。

依然是上面的例子：

设置N＝5.即统计用户进入网页后五次滚动/滑动操作的纵坐标。结果为：

{1.5,3,4.5,2,5}

每两次滚动/滑动之间的纵坐标变化的绝对值：

{|1.5-0|,|3-1.5|,|4.5-3|,|2-4.5|,|5-2|}

即

{1.5,1.5,1.5,2.5,3}

故单次移动最小距离为1.5时，误差步距即为1.5，用户每次滚动/滑动的纵坐标的变化为{0,1.5,3,4.5,6},但系统查询列表的范围由数值，变成区间[距离-误差步距,距离)的区间，即{[-1.5,0),[0,1.5),[1.5,3),[3,4.5),[4.5,6)}，这样三条评论均可以展现。

本发明已经通过上述实施例进行了说明，但应当理解的是，上述实施例只是用于举例和说明的目的，而非意在将本发明限制于所描述的实施例范围内。此外本领域技术人员可以理解的是，本发明并不局限于上述实施例，根据本发明的教导还可以做出更多种的变型和修改，这些变型和修改均落在本发明所要求保护的范围以内。本发明的保护范围由附属的权利要求书及其等效范围所界定。

Claims (10)

1.一种网页页面定位识别方法，其特征在于：包括如下步骤：

(1)网页元素初始化：遍历网页或指定网页上的某一区域中的全部网页元素，生成初始化检测列表,创建对该网页或指定网页上的某一区域被滚动/滑动的监听，设定屏幕上的某一区域为用户视线聚焦区域；

(2)识别网页元素类型：遍历初始化检测列表中的网页元素，判断其类型，去除广告和噪音元素；

(3)生成中间检测列表：将识别完类型的网页元素分别以唯一身份识别的元素ID标记，并将标记后的网页元素生成中间检测列表；

(4)碰撞检测：随着网页滚动/滑动，实时将中间检测列表的元素与监听到的当前用户视线聚焦区域进行碰撞检测，判断重叠的元素，若重叠元素为图片/文字，则输出其ID标记、用户视线聚焦在图片/文字上的位置，若重叠元素为音/视频，则输出其ID标记、用户当前观看到的音/视频时间，生成最终输出列表。

2.根据权利要求1所述的网页页面定位识别方法，其特征在于：

所述步骤(4)采用以下方式确定中间检测列表与监听到的当前用户视线聚焦区域相重叠：

A.将中间检测列表中的元素在网页中的坐标、宽度、高度构成一个矩形区域；

B.设定当前用户视线聚焦区域与A中元素矩形区域中心的水平间距为L，竖直间距为L’；视线聚焦区域与元素对角相切时，两者中心的水平间距为L₀，两者中心的竖直间距L₀’；

C.当L<L₀且L’<L₀’时，判定用户视线聚集区域与网页元素相碰撞，即两者重叠。

3.根据权利要求2所述的网页页面定位识别方法，其特征在于：

判定用户视线聚集区域与网页元素相碰撞后，对于图片和文字元素，获取其在网页中的绝对坐标，将其转化为相对坐标后，与图片/文字元素以及各自的元素ID形成最终图文输出列表；对于音/视频元素，获取当前时间并与网页元素中的音/视频元素及其对应的元素ID共同形成最终音/视频输出列表。

4.根据权利要求3所述的网页页面定位识别方法，其特征在于：

所述用户视线聚焦区域的相对纵坐标以下列公式(1)计算获得：

H₃＝H₁+H₀-H_2,   (1)

其中，H₀为垂直滚动时被滚动/滑动网页顶端到屏幕最上部的高度，H₁为用户视线聚焦区域距离屏幕上方的高度，H₂为与用户视线聚焦区域相碰撞的网页元素顶部到被滚动/滑动网页最上部的高度,H₃为用户视线聚焦区域的相对重叠元素的纵坐标；

所述用户视线聚焦区域的相对横坐标以下列公式(2)计算获得：

W₃＝W₁+W₀-W₂   (2)

其中，W₀为水平滚动/滑动时被滚动网页最左端到屏幕左侧的长度，W₁为用户视线聚焦区域距离屏幕左侧的长度，H₂为与用户视线聚焦区域相碰撞的网页元素左侧到被滚动/滑动网页左侧的长度，H₃为用户视线聚焦区域的相对重叠元素的纵坐标。

5.根据权利要求3所述的网页页面定位识别方法，其特征在于：

设定与用户视线聚焦区域相碰撞的网页元素的当前高度为H，当前宽度为W，先将用户视线聚焦区域的相对坐标转换为其相对于网页元素的百分比坐标，再与图片/文字元素以及各自的元素ID形成最终图文输出列表，所述用户视线聚焦区域的百分比坐标X、Y通过下列公式(3)和(4)计算获得：

Y＝H₃/H*100   (3)

X＝W₃/W*100   (4)。

6.根据权利要求1-5中任一所述的网页页面定位识别方法，其特征在于：

所述步骤(1)中用户视线聚焦区域由人为设定，或者由鼠标/眼球追踪器等输入设备实时设定或传入；

所述步骤(2)中识别网页元素类型先检查接收到的网页元素是否已经存在标记，且标记中能够提取出类型信息，如是，跳过判断，如否，通过该元素的HTML标签、所加载的文件路径、扩展名或content-type头来判断类型；

所述步骤(3)中唯一身份识别的元素ID通过如下方式标记：接收识别完类型的网页元素，检查该元素是否存在标记且标记中能够提取出唯一身份识别标识符，若是，将其类型与唯一身份识别标识符组合标记到元素上，记做元素ID；如否，按网页元素传送的先后顺序或日期时间生成元素唯一身份识别标识符并与其类型组合标记到元素上，记做元素ID。

7.一种网页页面定位识别系统，其特征在于：

包括初始化模块、类型识别模块、标记模块、碰撞检测模块、坐标转换模块和输入输出接口，其中，

初始化模块，用以监听当前用户对指定网页/网页某一区域的滚动或滑动操作，并遍历提取指定网页/网页某一区域中的全部网页元素，生成初始化检测列表，设定屏幕上的某一区域为用户视线聚焦区域；

类型识别模块，用以接收初始化模块生成的初始化检测列表，判断其中的网页元素类型，去除广告和噪音元素，将图片、文字及音/视频网页元素及元素类型提交给标记模块；

标记模块，用以接收类别识别模块提交的网页元素及元素类型，为每个网页元素生成包含元素类型信息的唯一可识别的元素ID，并生成中间检测列表；

碰撞检测模块，用以接收标记模块提交的中间检测列表和初始化模块获取的当前用户视线聚焦区域，提取当前用户视线聚焦区域内的网页元素与中间检测列表相接的网页元素，对于相接网页元素中的图片和文字元素，获取图片和文字元素的绝对坐标并提交坐标转换模块处理，对于相接网页元素中的音/视频元素连同其对应的元素ID提交输入输出接口；

坐标转换模块，用以接收图片和文字元素的绝对坐标，将之转化为百分比坐标，并将图片和文字元素、各自的元素ID连同元素百分比坐标形成最终图文输出列表；

输入输出接口，用以获取音/视频的时间，并与自碰撞检测模块获取的相应音/视频元素、各自的元素ID形成最终音视频输出列表。获取坐标转换模块形成的最终图文输出列表，输出最终音视频输出列表及最终图文输出列表。

8.根据权利要求7所述的网页页面定位识别系统，其特征在于：

所述初始化模块中的用户视线聚焦区域由认为设定，或者由鼠标/眼球追踪器等输入设备实时设定或传入；

所述坐标转换模块接收图片/文字类型元素的绝对坐标，将该坐标先转换成视线聚焦区域相对于元素本身的相对坐标，再根据元素本身的长度和宽度，将相对坐标转换成相对于元素本身的百分比坐标。

9.根据权利要求7中所述的网页页面定位识别系统，其特征在于：

所述元素ID为网页元素的唯一身份识别符和元素类型组成的名称；

所述输入输出接口包括输入接口和输出接口，输入接口用于获取音/视频时间，输出接口用于输出与用户视线聚焦范围重叠的元素ID、重叠区域在图片/文字元素上的具体位置以及音/视频具体时间。

10.根据权利要求7-9中任一所述的网页页面定位识别系统，其特征在于：

还包括回调接口和最接近判别模块，其中，

回调接口，用以接收当前用户视线聚焦区域内的最终音视频列表及最终图文输出列表，提交数据库、展示评论或展示相关信息；

最接近判别模块，用以接收最终图文输出列表，选择最接近当前用户视线聚焦区域内的元素及该元素上的最接近当前用户视线聚焦区域位置，将其相关信息展示给用户并回传给回调接口。