CN113762235A - 检测页面叠加区域的方法和装置 - Google Patents

Abstract

本发明公开了一种检测页面叠加区域的方法和装置，涉及计算机技术领域。该方法的一具体实施方式包括：隐藏页面中除目标区块以外的其他区块，并确定目标区块的内容区域边界；根据目标区块的内容区域边界，得到目标区块的内容区域的第一像素矩阵；恢复展示其他区块，并提取目标区块的内容区域的第二像素矩阵；根据第一像素矩阵和第二像素矩阵检测页面中的叠加区域。该实施方式在实现自动化检测的基础上提高了精确度和智能性，使用操作简便，节省了时间和人力成本，并且此方法具有普适性，动态地解决了页面空白边距重叠而带来的重叠误判问题，能够比较精准有效的判断页面中的实际内容是否存在叠加，由此能够提高网页页面整体质量，提升用户体验。

Description

检测页面叠加区域的方法和装置

技术领域

本发明涉及计算机技术领域，尤其涉及一种检测页面叠加区域的方法和装置。

背景技术

用户浏览网页是通过浏览网页中的文字和图片等内容来获取所需的信息，因此互联网网页合理的页面布局能够方便用户阅读和获取页面上的信息，进而才有可能转化为商业行为，而不合理的页面布局有可能会导致页面文字被部分覆盖或全部覆盖，从而影响用户的正常阅读，使得用户不能从浏览页面中获取有效的信息。通常检测文字或图片等网页内容的叠加是通过人工检查来完成，另外一种相对简单的检测办法是把网页内容叠加检测转换为文字或图片等内容所在的区块(block)叠加检测，这种方法把区块(block)视为一个带尺寸的矩形，当两个矩形的长宽之和的一半大于两个矩形中心点距离时，视为矩形存在区域叠加。

在实现本发明过程中，发明人发现现有技术中至少存在如下问题：

人工检查费时费力，而且叠加判断结果带有主观性，不够精确和智能，在多场景检测和兼容性检测时操作麻烦；区块矩形尺寸叠加判断方法可以实现自动化检测，但是区块一般存在内边距和外边距，不能直接使用矩形的外边界边框尺寸进行判断，即使考虑了矩形的内外边距改用内容区域尺寸来比较，由于文字并非占据内容区域的全部区域，使用内容区域尺寸来判断叠加也不够精确。

发明内容

有鉴于此，本发明实施例提供一种检测页面叠加区域的方法和装置，能够基于画布(Canvas)技术提取网页区块的内容区域边界，并在像素值统计基础上检测页面叠加，在判断页面叠加时不受区块(block)内外边距的影响，内容区域边界完全由内容区域中的实际内容显示决定，具有普适性，动态地解决了内容区域空白边距重叠而带来的重叠误判问题，能够比较精准有效的判断区块(block)中的实际内容是否存在叠加，由此能够提高网页页面整体质量，提升用户体验。

为实现上述目的，根据本发明实施例的一个方面，提供了一种检测页面叠加区域的方法。

一种检测页面叠加区域的方法，包括：隐藏页面中除目标区块以外的其他区块，并确定目标区块的内容区域边界；根据目标区块的内容区域边界，得到目标区块的内容区域的第一像素矩阵；恢复展示其他区块，并提取目标区块的内容区域的第二像素矩阵；根据第一像素矩阵和第二像素矩阵检测页面中的叠加区域。

可选地，在确定目标区块的内容区域边界之前，还包括：对页面进行锐化处理。

可选地，锐化处理包括：将页面的背景色设置为白色；将目标区块的背景色设置为完全透明色；将目标区块的内容颜色设置为黑色。

可选地，确定目标区块的内容区域边界包括：获取目标区块的内容区域的位置和大小；提取目标区块的内容区域内每个像素点的像素值；将像素值转换为二进制数值以得到目标区块的内容区域对应的二进制像素矩阵；根据二进制像素矩阵得到目标区块的内容区域边界。

可选地，根据二进制像素矩阵得到目标区块的内容区域边界之前，还包括：将二进制像素矩阵中孤立的0值设置为1以进行去噪处理，其中，0为黑色点对应的二进制数值，1为白色点对应的二进制数值。

可选地，目标区块的内容区域内每个像素点的像素值为彩色像素值；将像素值转换为二进制数值以得到目标区块的内容区域对应的二进制像素矩阵包括：将彩色像素值转换为灰度图单通道像素值；将灰度图单通道像素值转换为二进制数值以得到目标区块的内容区域对应的二进制像素矩阵。

可选地，提取目标区块的内容区域内每个像素点的像素值包括：创建一个覆盖页面的画布；基于页面渲染树将页面绘制于画布上并显示；通过画布依次读取目标区块的内容区域内每个像素点的像素值。

可选地，将灰度图单通道像素值转换为二进制数值包括：根据灰度图单通道像素值的期望值将灰度图单通道像素值转换为二进制数值。

可选地，将灰度图单通道像素值转换为二进制数值包括：当灰度图单通道像素值不小于灰度图单通道像素值的期望值时，二进制数值取值为1，否则二进制数值取值为0。

可选地，根据二进制像素矩阵得到目标区块的内容区域边界包括：扫描二进制像素矩阵，提取出每一行的边界顶点，边界顶点包括左边界顶点和右边界顶点，左边界顶点为一行中第一个出现的0值所对应的点，右边界顶点为一行中最后一个出现的0值所对应的点，其中，0为黑色点对应的二进制数值；将每一行的边界顶点用直线连接起来得到目标区块的内容区域边界。

可选地，根据第一像素矩阵和第二像素矩阵检测页面中的叠加区域包括：将第一像素矩阵和第二像素矩阵按位置进行异或操作得到第三矩阵，并根据第三矩阵检测页面中的叠加区域。

可选地，根据第一像素矩阵和第二像素矩阵检测页面中的叠加区域包括：将第一像素矩阵和第二像素矩阵按位置进行异或操作得到第三矩阵；其中，第三矩阵中元素值为1的点即为页面中的叠加区域。

可选地，根据第一像素矩阵和第二像素矩阵检测页面中的叠加区域包括：将第一像素矩阵和第二像素矩阵按位置进行异或操作得到第三矩阵；统计第三矩阵中的所有元素个数，以及元素值为1的元素个数；将元素值为1的元素个数占所有元素个数的百分比作为页面的叠加区域占比；根据预设阈值和叠加区域占比检测页面中的叠加区域。

根据本发明实施例的另一方面，提供了一种检测页面叠加区域的装置。

一种检测页面叠加区域的装置，包括：确定边界模块，用于隐藏页面中除目标区块以外的其他区块，并确定目标区块的内容区域边界；第一矩阵模块，用于根据目标区块的内容区域边界，得到目标区块的内容区域的第一像素矩阵；第二矩阵模块，用于恢复展示其他区块，并提取目标区块的内容区域的第二像素矩阵；叠加检测模块，用于根据第一像素矩阵和第二像素矩阵检测页面中的叠加区域。

可选地，装置还包括锐化处理模块，用于：对页面进行锐化处理。

可选地，锐化处理模块还用于：将页面的背景色设置为白色；将目标区块的背景色设置为完全透明色；将目标区块的内容颜色设置为黑色。

可选地，确定边界模块还用于：获取目标区块的内容区域的位置和大小；提取目标区块的内容区域内每个像素点的像素值；将像素值转换为二进制数值以得到目标区块的内容区域对应的二进制像素矩阵；根据二进制像素矩阵得到目标区块的内容区域边界。

可选地，装置还包括去噪处理模块，用于：将二进制像素矩阵中孤立的0值设置为1以进行去噪处理，其中，0为黑色点对应的二进制数值，1为白色点对应的二进制数值。

可选地，目标区块的内容区域内每个像素点的像素值为彩色像素值；确定边界模块还用于：将彩色像素值转换为灰度图单通道像素值；将灰度图单通道像素值转换为二进制数值以得到目标区块的内容区域对应的二进制像素矩阵。

可选地，确定边界模块还用于：创建一个覆盖页面的画布；基于页面渲染树将页面绘制于画布上并显示；通过画布依次读取目标区块的内容区域内每个像素点的像素值。

可选地，确定边界模块还用于：根据灰度图单通道像素值的期望值将灰度图单通道像素值转换为二进制数值。

可选地，确定边界模块还用于：当灰度图单通道像素值不小于灰度图单通道像素值的期望值时，二进制数值取值为1，否则二进制数值取值为0。

可选地，确定边界模块还用于：扫描二进制像素矩阵，提取出每一行的边界顶点，边界顶点包括左边界顶点和右边界顶点，左边界顶点为一行中第一个出现的0值所对应的点，右边界顶点为一行中最后一个出现的0值所对应的点，其中，0为黑色点对应的二进制数值；将每一行的边界顶点用直线连接起来得到目标区块的内容区域边界。

可选地，叠加检测模块还用于：将第一像素矩阵和第二像素矩阵按位置进行异或操作得到第三矩阵，并根据第三矩阵检测页面中的叠加区域。

可选地，叠加检测模块还用于：将第一像素矩阵和第二像素矩阵按位置进行异或操作得到第三矩阵；其中，第三矩阵中元素值为1的点即为页面中的叠加区域。

可选地，叠加检测模块还用于：将第一像素矩阵和第二像素矩阵按位置进行异或操作得到第三矩阵；统计第三矩阵中的所有元素个数，以及元素值为1的元素个数；将元素值为1的元素个数占所有元素个数的百分比作为页面的叠加区域占比；根据预设阈值和叠加区域占比检测页面中的叠加区域。

根据本发明实施例的又一方面，提供了一种检测页面叠加区域的电子设备。

一种检测页面叠加区域的电子设备，包括：一个或多个处理器；存储装置，用于存储一个或多个程序，当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现本发明实施例所提供的检测页面叠加区域的方法。

根据本发明实施例的再一方面，提供了一种计算机可读介质。

一种计算机可读介质，其上存储有计算机程序，所述程序被处理器执行时实现本发明实施例所提供的检测页面叠加区域的方法。

上述发明中的一个实施例具有如下优点或有益效果：采用隐藏页面中除目标区块以外的其他区块，并确定目标区块的内容区域边界；根据目标区块的内容区域边界，得到目标区块的内容区域的第一像素矩阵；恢复展示其他区块，并提取目标区块的内容区域的第二像素矩阵；根据第一像素矩阵和第二像素矩阵检测页面中的叠加区域的技术手段，在实现自动化检测的基础上提高了精确度和智能性，使用操作简便，节省了时间和人力成本，并且此方法具有普适性，动态地解决了页面空白边距重叠而带来的重叠误判问题，能够比较精准有效的判断页面中的实际内容是否存在叠加，由此能够提高网页页面整体质量，提升用户体验。

上述的非惯用的可选方式所具有的进一步效果将在下文中结合具体实施方式加以说明。

附图说明

附图用于更好地理解本发明，不构成对本发明的不当限定。其中：

图1是根据本发明实施例的检测页面叠加区域的方法的主要步骤示意图；

图2是根据本发明实施例的检测页面叠加区域的方法的边界提取步骤示意图；

图3是根据本发明实施例的检测页面叠加区域的方法的像素点提取结果示意图；

图4是根据本发明实施例的检测页面叠加区域的方法的二进制像素值矩阵示意图；

图5是根据本发明实施例的检测页面叠加区域的方法的边界提取结果示意图；

图6是根据本发明实施例的检测页面叠加区域的方法的叠加检测流程图；

图7是根据本发明实施例的检测页面叠加区域的方法的像素值矩阵示意图；

图8是根据本发明实施例的检测页面叠加区域的方法的异或处理矩阵示意图；

图9是根据本发明实施例的检测页面叠加区域的装置的主要模块示意图；

图10是本发明实施例可以应用于其中的示例性***架构图；

图11是适于用来实现本发明实施例的终端设备或服务器的计算机***的结构示意图。

具体实施方式

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

互联网在给人们带来方便快捷生活体验的同时，也在悄悄改变人们获取信息、了解世界的方式，互联网(WEB)网页中的重要组成部分是文字，用户浏览网页也主要通过阅读互联网(WEB)中的文字来获取所需的信息，在现代互联网商业体系中，文字作为商业手段的承载，与广告创意和商业策划息息相关，互联网(WEB)网页渲染的重要组成部分为标记语言HTML、层叠样式表CSS和高级编程语言JS，标记语言HTML和层叠样式表CSS结合成为渲染树，可以决定页面元素的位置和大小，即页面布局，页面布局可以直接影响页面中内容的展示。

合理的页面布局能够给用户一种图文并茂的感觉，方便用户阅读和获取页面上的文字信息，进而才能有可能转化为商业行为。反之，不合理的页面布局有可能会导致文字内容被遮挡，渗透，部分覆盖或全部覆盖，从而影响用户的正常阅读，用户不能从浏览页面中获取有效的信息，常见的文字叠加如文字和文字叠加、文字和图片叠加等，能够提前检测页面中的文字叠加情况，对提高用户体验，提高页面整体质量有重要作用，通常检测文字叠加只能通过人工检查来完成，一种相对简单的检测办法是把文字叠加检测转换为其所在的区块(block)叠加检测，这种方法把区块(block)视为一个带尺寸的矩形，当两个矩形的长宽之和的一半大于两个矩形中心点距离时，视为矩形存在区域叠加。

与自动检测相比，人工检查的缺点是费时费力，而且叠加判断结果带有主观判断因素，不够精确和智能，在多场景检测和兼容性检测时操作麻烦，区块(block)矩形尺寸叠加判断方法可以实现自动化检测，但是存在如下缺陷：区块(block)一般会存在内边距(padding)和外边距(margin)，不能直接使用矩形的外边界(bounding-box)边框尺寸进行判断；即使考虑了矩形的内外边距改用内容区域(content-box)尺寸来比较，由于文字并非占据内容区域(content-box)的全部区域，例如它们可能居中显示，或者处于区块(block)左上角，甚至浮动在区块(block)的任意位置，即文字和内容区域之间存在空白边距，而且这个空白边距并非固定值，而是随内容文字不同而有所不同，使用内容区域(content-box)尺寸来判断叠加也不够精确，也就是说，即使内容区域(content-box)存在重叠，但如果叠加部分只在非文字区域的空白边距，那么并不能由此判断存在文字的叠加。

本发明基于画布(Canvas)技术提出一种优化的内容叠加自动检测方法，首先用高级编程语言js隐藏目标区块所在的页面中的其他区块以排除干扰，用于确定目标区块的文字或图片等内容区域边界，然后基于确定的内容区域边界，获取内容区域对应的第一像素矩阵；之后，再将隐藏的其他区块进行显示，并再次获取内容区域对应的第二像素矩阵；最后，根据第一像素矩阵和第二像素矩阵来判断目标区块的内容区域是否存在叠加。在本发明的实施例介绍中，以目标区块中的内容为文字为例来进行介绍。

根据本发明的实施例，确定目标区块文字边界的方法为：通过画布(Canvas)绘制目标区块所在的页面，并提取目标区块像素值矩阵，进一步通过归一化运算提取包裹文字的最小边界多边形；其次，用高级编程语言js控制显示页面中别的区块，用相同的方法提取上述边界多边形内的像素值矩阵；最后比较两组像素值矩阵的差异，用以判断是否存在像素入侵，达到判断是否存在文字叠加的目的，本发明在判断实际内容叠加时不受区块(block)内外边距的影响，文字边界区域完全由内容区域中的文字显示决定，具有普适性，动态地解决了内容区域中空白边距重叠而带来的重叠误判问题，能够比较精准有效的判断文字是否存在叠加。

图1是根据本发明实施例的检测页面叠加区域的方法的主要步骤示意图，如图1所示，本发明实施例的检测页面叠加区域的方法，主要包括如下的步骤S101至步骤S104。

步骤S101，隐藏页面中除目标区块以外的其他区块，并确定目标区块的内容区域边界；

步骤S102，根据目标区块的内容区域边界，得到目标区块的内容区域的第一像素矩阵；

步骤S103，恢复展示其他区块，并提取目标区块的内容区域的第二像素矩阵；

步骤S104，根据第一像素矩阵和第二像素矩阵检测页面中的叠加区域。

根据上述的步骤S101至步骤S104，本发明提出了基于画布(Canvas)技术的互联网(WEB)页面内容区域边界提取方法以及在像素值统计基础上的实际内容叠加检测方法，在判断页面叠加时不受区块(block)内外边距的影响，内容区域边界完全由内容区域中的实际内容显示决定，具有普适性，动态地解决了内容区域空白边距重叠而带来的重叠误判问题，能够比较精准有效的判断区块(block)中的实际内容是否存在叠加，能够提高网页页面整体质量，提升用户体验。

根据本发明的一个实施例，在确定目标区块的内容区域边界之前，还包括：对页面进行锐化处理。

在本发明的实施例中，锐化处理包括：将页面的背景色设置为白色；将目标区块的背景色设置为完全透明色；将目标区块的内容颜色设置为黑色。

根据本发明的另一个实施例，确定目标区块的内容区域边界包括：获取目标区块的内容区域的位置和大小；提取目标区块的内容区域内每个像素点的像素值；将像素值转换为二进制数值以得到目标区块的内容区域对应的二进制像素矩阵；根据二进制像素矩阵得到目标区块的内容区域边界。

根据本发明的又一个实施例，根据二进制像素矩阵得到目标区块的内容区域边界之前，还包括：将二进制像素矩阵中孤立的0值设置为1以进行去噪处理，其中，0为黑色点对应的二进制数值，1为白色点对应的二进制数值。

在本发明的实施例中，目标区块的内容区域内每个像素点的像素值为彩色像素值；将像素值转换为二进制数值以得到目标区块的内容区域对应的二进制像素矩阵包括：将彩色像素值转换为灰度图单通道像素值；将灰度图单通道像素值转换为二进制数值以得到目标区块的内容区域对应的二进制像素矩阵。

在本发明的实施例中，提取目标区块的内容区域内每个像素点的像素值包括：创建一个覆盖页面的画布；基于页面渲染树将页面绘制于画布上并显示；通过画布依次读取目标区块的内容区域内每个像素点的像素值。

根据本发明的再一个实施例，将灰度图单通道像素值转换为二进制数值包括：根据灰度图单通道像素值的期望值将灰度图单通道像素值转换为二进制数值。

在本发明的实施例中，将灰度图单通道像素值转换为二进制数值包括：当灰度图单通道像素值不小于灰度图单通道像素值的期望值时，二进制数值取值为1，否则二进制数值取值为0。

在本发明的实施例中，根据二进制像素矩阵得到目标区块的内容区域边界包括：扫描二进制像素矩阵，提取出每一行的边界顶点，边界顶点包括左边界顶点和右边界顶点，左边界顶点为一行中第一个出现的0值所对应的点，右边界顶点为一行中最后一个出现的0值所对应的点，其中，0为黑色点对应的二进制数值；将每一行的边界顶点用直线连接起来得到目标区块的内容区域边界。

在本发明的实施例中，根据第一像素矩阵和第二像素矩阵检测页面中的叠加区域包括：将第一像素矩阵和第二像素矩阵按位置进行异或操作得到第三矩阵，并根据第三矩阵检测页面中的叠加区域。

在本发明的实施例中，根据第一像素矩阵和第二像素矩阵检测页面中的叠加区域包括：将第一像素矩阵和第二像素矩阵按位置进行异或操作得到第三矩阵；其中，第三矩阵中元素值为1的点即为页面中的叠加区域。

根据本发明的实施例，根据第一像素矩阵和第二像素矩阵检测页面中的叠加区域包括：将第一像素矩阵和第二像素矩阵按位置进行异或操作得到第三矩阵；统计第三矩阵中的所有元素个数，以及元素值为1的元素个数；将元素值为1的元素个数占所有元素个数的百分比作为页面的叠加区域占比；根据预设阈值和叠加区域占比检测页面中的叠加区域。

图2是根据本发明实施例的检测页面叠加区域的方法的边界提取步骤示意图，判断页面区域叠加的第一步是确定内容区域的边界，如图2所示，本发明实施例的检测页面叠加区域的方法的边界提取步骤主要包括以下的步骤1至步骤4。

步骤1、首先用高级编程语言js对目标区块所在的页面进行处理并记录目标区块的内容区域的位置和大小，此处，对页面进行的处理例如包括：隐藏目标区块所在的页面中其他非相关区块，以避免干扰；对页面进行锐化处理以提高边界提取准确率，减少噪声干扰，等等。在本发明的实施例中，锐化处理主要包括以下内容：

(1)将目标区块所在的页面背景色设置为标准白色(#FFF)；

(2)将目标区块背景色设置为完全透明色(transparent)；

(3)将目标区块中的实际内容颜色改为标准黑色，即将目标区块的文字颜色改为标准黑色#000；

在锐化处理后，即可准确地获取并记录目标区块内容区域(content-box)的位置和大小，即(pageX，pageY，width，height)，其中pageX和pageY为content-box左上角顶点相对于文档位置的横坐标和纵坐标，width和height是content-box本身的宽高；

通过锐化处理，可以确保页面中只有白色背景和黑色内容两种颜色，且不会被背景色等多余因素干扰。

步骤2、利用画布(Canvas)技术进行目标区块像素提取，用高级编程语言js创建一个覆盖当前页面的画布(Canvas)，基于当前页面渲染树将网页绘制于所述画布(Canvas)上并显示，通过画布(Canvas)依次读取目标区块内容区域(content-box)矩形区域内每个像素点的像素值。

图3是根据本发明实施例的检测页面叠加区域的方法的像素点提取结果示意图，当目标区块内存在一个字母O时，对其进行像素点提取可能结果如图3所示，其中每一个格子代表一个像素点。

步骤3、步骤2中读取的目标区块的内容区域内每个像素点的像素值为RGB三通道的彩色像素值，根据以下加权经验公式将每一彩色像素值转换为灰度图单通道像素值：

Y＝0.299R+0.587G+0.114B；

每个像素点提取的像素值经过转化，由三通道彩色像素值转化为0～255的值，例如，对于提取像素值是RGB(255，255，255)的白色点来说，其灰度图单通道像素值Y＝0.299*255+0.587*255+0.114*255＝255，对于提取像素值是RGB(0，0，0)的黑色点来说，其灰度图单通道像素值Y＝0.299*0+0.587*0+0.114*0＝0。

图4是根据本发明实施例的检测页面叠加区域的方法的二进制像素值矩阵示意图，为了方便计算，根据矩阵的期望值E将灰度图单通道像素值转换为二进制，即：

Z＝(Y≥E)？1:0；

上述(？：)三目运算符的含义为，当Y值不小于E值时，Z取值为1，否则为0，根据步骤1锐化的操作，可认为Z值为0的区域为纯黑色，即为实际内容覆盖的区域，如图4所示为目标区块内的像素提取矩阵转换为二进制的结果，其中黑色点对应二进制值为0，白色点对应二进制值为1，由于画布(Canvas)绘制误差和计算误差等的影响，提取像素值可能会存在干扰，可以进行一些去噪处理，例如将孤立的0值置为1等，若一个0周围8个像素点都是1，那么此像素点就是孤立的。

步骤4、内容区域边界分割，扫描二进制像素值矩阵，提取出每一行的边界顶点，边界顶点包括左边界顶点和右边界顶点，左边界顶点为一行中第一个出现的0值所对应的点，右边界顶点为一行中最后一个出现的0值所对应的点，其中，0为黑色点对应的二进制数值，即提取出每一行的0值左边界l和右边界r，得到包裹文字最小边界的多边形：

上式中第i行的左边界计为l_i，右边界计为r_i，其中l_i为本行第一个出现0值的下标，r_i为最后一个出现0值的下标；将每一行的边界顶点用直线连接起来得到目标区块的内容区域边界，即为包裹文字的最小边界多边形。

图5是根据本发明实施例的检测页面叠加区域的方法的边界提取结果示意图，如图5所示，二进制像素值矩阵进行边界提取的结果中，将所有0值进行连线即可得到内容区域边界，即文字边界，假定像素矩阵左上角坐标为(1，1)，则描述图中第3行边界范围的表达式为{row:3,l:3,r:6}。

图6是根据本发明实施例的检测页面叠加区域的方法的叠加检测流程图，在确定了内容区域边界之后就可以进行页面叠加检测了，即确定了文字边界以后就可以进行文字叠加检测，如图6所示，叠加检测流程主要包括以下步骤1至步骤4。

步骤1、根据目标区块的内容区域边界，得到目标区块的内容区域的第一像素矩阵，按照前述方法提取目标区块文字边界，在提取文字边界的同时，可以得到边界内容区内的像素值二进制c矩阵，即∑c_ij，其中∑c_ij∈C。

步骤2、恢复展示其他区块，并提取目标区块的内容区域的第二像素矩阵，用高级编程语言js恢复目标区块所在页面中其他区块的展示用以复现像素叠加，用与获取目标区块像素值二进制c矩阵同样的方法提取叠加之后，获取边界多边形内的像素值二进制d矩阵，即得到∑d_ij，其中∑d_ij∈C。

图7是根据本发明实施例的检测页面叠加区域的方法的像素值矩阵示意图，如图7所示，对边界内容区域内的二进制像素值进行提取得到第一像素矩阵与第二像素矩阵，即c矩阵为初次提取边界后的二进制像素矩阵，而d矩阵为页面中区块叠加后的二进制像素矩阵，从图中可以看出，标示区域为像素入侵点，即存在像素叠加的区域。

步骤3、将第一像素矩阵和第二像素矩阵按位置进行异或操作得到第三矩阵，第三矩阵中元素值为1的点即为所述页面中的叠加区域，即将c矩阵与d矩阵两者进行按位置异或处理，得到第三矩阵e矩阵，即：

e_ij＝c_ijxord_ij

按照异或的运算规则，当像素值前后无变化时，异或运算结果为0，前后不相同时，异或运算结果为1，即运算结果为1的区域为出现叠加的区域。

图8是根据本发明实施例的检测页面叠加区域的方法的异或处理矩阵示意图，对上述c矩阵和d矩阵进行异或操作，得到e矩阵结果如图8所示，其中数字0代表无像素叠加，1代表有像素叠加。

步骤4、统计第三矩阵中的所有元素个数，以及元素值为1的元素个数，将元素值为1的元素个数占所有元素个数的百分比作为页面的叠加区域占比，根据预设阈值和叠加区域占比检测所述页面中的叠加区域，在边界多边形范围内，分别统计e_ij的所有数字个数，以及运算结果为1的个数，可以得到叠加区域占总数的百分比P，例如，对上述e矩阵进行统计，得到所有数字个数为24个，其中数字1出现了4次，则叠加区域占总数的百分比为4/24＝17％，通过对P和预设的判断阈值Q进行对比，若P大于Q，可以认为像素入侵达到了阈值，即存在文字叠加，否则可以认为像素入侵可以被忽略，理论上上述阈值Q>0即存在像素入侵，为了兼容误差和视觉效果，Q值可以由使用者自定义，本发明至此实现。

图9是根据本发明实施例的检测页面叠加区域的装置的主要模块示意图，如图9所示，本发明实施例的检测页面叠加区域的装置900主要包括确定边界模块901、第一矩阵模块902、第二矩阵模块903、叠加检测模块904。

确定边界模块901，用于隐藏页面中除目标区块以外的其他区块，并确定目标区块的内容区域边界；

第一矩阵模块902，用于根据目标区块的内容区域边界，得到目标区块的内容区域的第一像素矩阵；

第二矩阵模块903，用于恢复展示其他区块，并提取目标区块的内容区域的第二像素矩阵；

叠加检测模块904，用于根据第一像素矩阵和第二像素矩阵检测页面中的叠加区域。

在本发明的实施例中，装置900还包括锐化处理模块(图中未示出)，用于：对页面进行锐化处理。

根据本发明的一个实施例，锐化处理处理模块还用于：将页面的背景色设置为白色；将目标区块的背景色设置为完全透明色；将目标区块的内容颜色设置为黑色。

根据本发明的另一个实施例，确定边界模块901还用于：获取目标区块的内容区域的位置和大小；提取目标区块的内容区域内每个像素点的像素值；将像素值转换为二进制数值以得到目标区块的内容区域对应的二进制像素矩阵；根据二进制像素矩阵得到目标区块的内容区域边界。

在本发明的实施例中，装置900还包括去噪处理模块(图中未示出)，用于：将二进制像素矩阵中孤立的0值设置为1以进行去噪处理，其中，0为黑色点对应的二进制数值，1为白色点对应的二进制数值。

在本发明的实施例中，目标区块的内容区域内每个像素点的像素值为彩色像素值；确定边界模块901还用于：将彩色像素值转换为灰度图单通道像素值；将灰度图单通道像素值转换为二进制数值以得到目标区块的内容区域对应的二进制像素矩阵。

根据本发明的又一个实施例，确定边界模块901还用于：创建一个覆盖页面的画布；基于页面渲染树将页面绘制于画布上并显示；通过画布依次读取目标区块的内容区域内每个像素点的像素值。

在本发明的实施例中，确定边界模块901还用于：根据灰度图单通道像素值的期望值将灰度图单通道像素值转换为二进制数值。

在本发明的实施例中，确定边界模块901还用于：当灰度图单通道像素值不小于灰度图单通道像素值的期望值时，二进制数值取值为1，否则二进制数值取值为0。

在本发明的实施例中，确定边界模块901还用于：扫描二进制像素矩阵，提取出每一行的边界顶点，边界顶点包括左边界顶点和右边界顶点，左边界顶点为一行中第一个出现的0值所对应的点，右边界顶点为一行中最后一个出现的0值所对应的点，其中，0为黑色点对应的二进制数值；将每一行的边界顶点用直线连接起来得到目标区块的内容区域边界。

根据本发明的再一个实施例，叠加检测模块904还用于：将第一像素矩阵和第二像素矩阵按位置进行异或操作得到第三矩阵，并根据第三矩阵检测页面中的叠加区域。

在本发明的实施例中，叠加检测模块904还用于：将第一像素矩阵和第二像素矩阵按位置进行异或操作得到第三矩阵；其中，第三矩阵中元素值为1的点即为页面中的叠加区域。

在本发明的实施例中，叠加检测模块904还用于：将第一像素矩阵和第二像素矩阵按位置进行异或操作得到第三矩阵；统计第三矩阵中的所有元素个数，以及元素值为1的元素个数；将元素值为1的元素个数占所有元素个数的百分比作为页面的叠加区域占比；根据预设阈值和叠加区域占比检测页面中的叠加区域。

图10示出了可以应用本发明实施例的检测页面叠加区域的方法或检测页面叠加区域的装置的示例性***架构1000。

如图10所示，***架构1000可以包括终端设备1001、1002、1003，网络1004和服务器1005。网络1004用以在终端设备1001、1002、1003和服务器1005之间提供通信链路的介质。网络1004可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆等等。

用户可以使用终端设备1001、1002、1003通过网络1004与服务器1005交互，以接收或发送消息等。终端设备1001、1002、1003上可以安装有各种客户端应用，例如网页类应用、叠加测试类工具、搜索类应用等(仅为示例)。

终端设备1001、1002、1003可以是具有显示屏并且支持网页浏览的各种电子设备，包括但不限于智能手机、平板电脑、膝上型便携计算机和台式计算机等等。

服务器1005可以是提供各种服务的服务器，例如对用户利用终端设备1001、1002、1003所浏览的测试类工具提供支持的后台管理服务器(仅为示例)。后台管理服务器可以对接收到的像素值等数据进行分析等处理，并将处理结果(例如是否产生页面叠加--仅为示例)反馈给终端设备。

需要说明的是，本发明实施例所提供的检测页面叠加区域的方法一般由服务器1005执行，相应地，检测页面叠加区域的装置一般设置于服务器1005中。

应该理解，图10中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要，可以具有任意数目的终端设备、网络和服务器。

下面参考图11，其示出了适于用来实现本发明实施例的终端设备或服务器的计算机***1100的结构示意图。图11示出的终端设备或服务器仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。

如图11所示，计算机***1100包括中央处理单元(CPU)1101，其可以根据存储在只读存储器(ROM)1102中的程序或者从存储部分1108加载到随机访问存储器(RAM)1103中的程序而执行各种适当的动作和处理。在RAM 1103中，还存储有***1100操作所需的各种程序和数据。CPU 1101、ROM 1102以及RAM 1103通过总线1104彼此相连。输入/输出(I/O)接口1105也连接至总线1104。

以下部件连接至I/O接口1105：包括键盘、鼠标等的输入部分1106；包括诸如阴极射线管(CRT)、液晶显示器(LCD)等以及扬声器等的输出部分1107；包括硬盘等的存储部分1108；以及包括诸如LAN卡、调制解调器等的网络接口卡的通信部分1109。通信部分1109经由诸如因特网的网络执行通信处理。驱动器1110也根据需要连接至I/O接口1105。可拆卸介质1111，诸如磁盘、光盘、磁光盘、半导体存储器等等，根据需要安装在驱动器1110上，以便于从其上读出的计算机程序根据需要被安装入存储部分1108。

特别地，根据本发明公开的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本发明公开的实施例包括一种计算机程序产品，其包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信部分1109从网络上被下载和安装，和/或从可拆卸介质1111被安装。在该计算机程序被中央处理单元(CPU)1101执行时，执行本发明的***中限定的上述功能。

需要说明的是，本发明所示的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的***、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本发明中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行***、装置或者器件使用或者与其结合使用。而在本发明中，计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行***、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：无线、电线、光缆、RF等等，或者上述的任意合适的组合。

附图中的流程图和框图，图示了按照本发明各种实施例的***、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，上述模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图或流程图中的每个方框、以及框图或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的***来实现，或者可以用专用硬件与计算机指令的组合来实现。

描述于本发明实施例中所涉及到的单元或模块可以通过软件的方式实现，也可以通过硬件的方式来实现。所描述的单元或模块也可以设置在处理器中，例如，可以描述为：一种处理器包括确定边界模块、第一矩阵模块、第二矩阵模块、叠加检测模块。其中，这些单元或模块的名称在某种情况下并不构成对该单元或模块本身的限定，例如，确定边界模块还可以被描述为“用于隐藏页面中除目标区块以外的其他区块，并确定所述目标区块的内容区域边界的模块”。

作为另一方面，本发明还提供了一种计算机可读介质，该计算机可读介质可以是上述实施例中描述的设备中所包含的；也可以是单独存在，而未装配入该设备中。上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被一个该设备执行时，使得该设备包括：隐藏页面中除目标区块以外的其他区块，并确定所述目标区块的内容区域边界；根据所述目标区块的内容区域边界，得到所述目标区块的内容区域的第一像素矩阵；恢复展示所述其他区块，并提取所述目标区块的内容区域的第二像素矩阵；根据所述第一像素矩阵和所述第二像素矩阵检测所述页面中的叠加区域。

根据本发明实施例的技术方案，采用隐藏页面中除目标区块以外的其他区块，并确定所述目标区块的内容区域边界；根据所述目标区块的内容区域边界，得到所述目标区块的内容区域的第一像素矩阵；恢复展示所述其他区块，并提取所述目标区块的内容区域的第二像素矩阵；根据所述第一像素矩阵和所述第二像素矩阵检测所述页面中的叠加区域的技术手段，在实现自动化检测的基础上提高了精确度和智能性，使用操作简便，节省了时间和人力成本，并且此方法具有普适性，动态地解决了页面空白边距重叠而带来的重叠误判问题，能够比较精准有效的判断页面中的实际内容是否存在叠加，由此能够提高网页页面整体质量，提升用户体验。

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

Claims (16)

1.一种检测页面叠加区域的方法，其特征在于，包括：

隐藏页面中除目标区块以外的其他区块，并确定所述目标区块的内容区域边界；

根据所述目标区块的内容区域边界，得到所述目标区块的内容区域的第一像素矩阵；

恢复展示所述其他区块，并提取所述目标区块的内容区域的第二二进制像素矩阵；

根据所述第一像素矩阵和所述第二像素矩阵检测所述页面中的叠加区域。

2.根据权利要求1所述的方法，其特征在于，在确定所述目标区块的内容区域边界之前，还包括：

对所述页面进行锐化处理。

3.根据权利要求2所述的方法，其特征在于，所述锐化处理包括：

将所述页面的背景色设置为白色；

将所述目标区块的背景色设置为完全透明色；

将所述目标区块的内容颜色设置为黑色。

4.根据权利要求1所述的方法，其特征在于，确定所述目标区块的内容区域边界包括：

获取所述目标区块的内容区域的位置和大小；

提取所述目标区块的内容区域内每个像素点的像素值；

将所述像素值转换为二进制数值以得到所述目标区块的内容区域对应的二进制像素矩阵；

根据所述二进制像素矩阵得到所述目标区块的内容区域边界。

5.根据权利要求4所述的方法，其特征在于，根据所述二进制像素矩阵得到所述目标区块的内容区域边界之前，还包括：

将所述二进制像素矩阵中孤立的0值设置为1以进行去噪处理，其中，0为黑色点对应的二进制数值，1为白色点对应的二进制数值。

6.根据权利要求4所述的方法，其特征在于，所述目标区块的内容区域内每个像素点的像素值为彩色像素值；

将所述像素值转换为二进制数值以得到所述目标区块的内容区域对应的二进制像素矩阵包括：

将所述彩色像素值转换为灰度图单通道像素值；

将所述灰度图单通道像素值转换为二进制数值以得到所述目标区块的内容区域对应的二进制像素矩阵。

7.根据权利要求4或6所述的方法，其特征在于，提取所述目标区块的内容区域内每个像素点的像素值包括：

创建一个覆盖所述页面的画布；

基于页面渲染树将所述页面绘制于所述画布上并显示；

通过所述画布依次读取所述目标区块的内容区域内每个像素点的像素值。

8.根据权利要求6所述的方法，其特征在于，将所述灰度图单通道像素值转换为二进制数值包括：

根据所述灰度图单通道像素值的期望值将所述灰度图单通道像素值转换为二进制数值。

9.根据权利要求6或8所述的方法，其特征在于，将所述灰度图单通道像素值转换为二进制数值包括：

当所述灰度图单通道像素值不小于所述灰度图单通道像素值的期望值时，二进制数值取值为1，否则二进制数值取值为0。

10.根据权利要求4所述的方法，其特征在于，根据所述二进制像素矩阵得到所述目标区块的内容区域边界包括：

扫描所述二进制像素矩阵，提取出每一行的边界顶点，所述边界顶点包括左边界顶点和右边界顶点，所述左边界顶点为一行中第一个出现的0值所对应的点，所述右边界顶点为一行中最后一个出现的0值所对应的点，其中，0为黑色点对应的二进制数值；

将所述每一行的边界顶点用直线连接起来得到所述目标区块的内容区域边界。

11.根据权利要求1或4所述的方法，其特征在于，根据所述第一像素矩阵和所述第二像素矩阵检测所述页面中的叠加区域包括：

将所述第一像素矩阵和所述第二像素矩阵按位置进行异或操作得到第三矩阵，并根据所述第三矩阵检测所述页面中的叠加区域。

12.根据权利要求4所述的方法，其特征在于，根据所述第一像素矩阵和所述第二像素矩阵检测所述页面中的叠加区域包括：

将所述第一像素矩阵和所述第二像素矩阵按位置进行异或操作得到第三矩阵；其中，所述第三矩阵中元素值为1的点即为所述页面中的叠加区域。

13.根据权利要求4所述的方法，其特征在于，根据所述第一像素矩阵和所述第二像素矩阵检测所述页面中的叠加区域包括：

将所述第一像素矩阵和所述第二像素矩阵按位置进行异或操作得到第三矩阵；

统计所述第三矩阵中的所有元素个数，以及元素值为1的元素个数；

将所述元素值为1的元素个数占所有元素个数的百分比作为所述页面的叠加区域占比；

根据预设阈值和所述叠加区域占比检测所述页面中的叠加区域。

14.一种检测页面叠加区域的装置，其特征在于，包括：

确定边界模块，用于隐藏页面中除目标区块以外的其他区块，并确定所述目标区块的内容区域边界；

第一矩阵模块，用于根据所述目标区块的内容区域边界，得到所述目标区块的内容区域的第一像素矩阵；

第二矩阵模块，用于恢复展示所述其他区块，并提取所述目标区块的内容区域的第二像素矩阵；

叠加检测模块，用于根据所述第一像素矩阵和所述第二像素矩阵检测所述页面中的叠加区域。

15.一种检测页面叠加区域的电子设备，其特征在于，包括：

一个或多个处理器；

存储装置，用于存储一个或多个程序，

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如权利要求1-13中任一所述的方法。

16.一种计算机可读介质，其上存储有计算机程序，其特征在于，所述程序被处理器执行时实现如权利要求1-13中任一所述的方法。

Images