本方法使用灰度值来辨别白屏

白色的 RGB 值为(255, 255, 255), 在灰度转换的情况下, 根据给定的转换公式 Gray = (Rx4 + Gx10 + Bx2) >> 8, 计算得到的灰度值为: Gray=(255x4+255x10+255x2)>>8=(1020+2550+510)>>8=4080>>8=15

方案

• 根据(x,y,w,h)取出指定区域的图像
• 将图片每个像素点的(R,G,B)转换为灰度值(0-15), 转换公式如下: Gray = (Rx4 + Gx10 + Bx2) >> 8
• 统计 Gray 的分布情况, 把各个灰度值的情况上报
• 为了避免过多上报, 我们会先计算一下白色的占比, 计算公式如下: whiteRate = GrayArr[15] / TotalPixels
• 当 whiteRate 大于 0.9 (配置中心可配 web.white_rate_threshold)我们才会上报
• 我们只能截屏幕可见区域的指定部分, 如果用户有滚动, 那么截取的可能就不是首屏的内容了

检测原理

这个白屏检测的原理基于对截取图像的灰度分布进行分析。具体步骤如下:

• 截取指定区域的图像: 根据给定的区域参数(x,y,w,h), 从屏幕截取指定位置的图像
• 将图片每个像素点的(R,G,B)转换为灰度值: 对截取的图像进行灰度转换。灰度值是图像亮度的表示, 用一个数值表示整个像素的明暗程度。根据给定的转换公式 Gray = (Rx4 + Gx10 + Bx2) >> 8, 计算每个像素点的灰度值, 范围为 0 到 15
• 统计灰度值的分布情况: 统计转换后的灰度值的分布情况, 得到每个灰度值出现的次数或比例
• 计算白色占比: 根据灰度值的分布情况, 计算白色(灰度值为 15)的占比, 即白色像素点在总像素点中的比例
• 白屏检测: 当白色占比大于设定的阈值(例如 0.9), 即白色像素点占据了大部分图像区域, 认为截取到的内容可能是白屏

这种方法的原理是基于白屏通常是整个屏幕大部分区域都是白色的特点。通过分析截取图像的灰度分布情况, 尤其是白色(灰度值最高)的占比, 可以判断当前页面是否呈现出白屏状态。这种方法可以有效避免截取到无效的白屏内容, 并且节省了上报的资源开销

灰度图像公式

Gray = (Rx4 + Gx10 + Bx2) >> 8 是一个用于将彩色图像转换为灰度图像的公式。这个公式通过计算 RGB 三个通道的加权和来得到灰度值,其中绿色通道的权重较大,表明绿色对灰度值的影响最大

让我们详细分析一下:

公式含义:

• R: 表示红色通道的值
• G: 表示绿色通道的值
• B: 表示蓝色通道的值
• Gray: 表示最终的灰度值
• >> 8: 表示右移 8 位,相当于除以 256

加权平均:

这个公式将红色、绿色、蓝色三个通道的值按照不同的权重加在一起:

• 红色的权重是 4
• 绿色的权重是 10,比其他两个通道更高,反映了人眼对绿色更为敏感
• 蓝色的权重是 2,相对较低

将它们加权后除以 256 来得到一个 0 到 15 的灰度值

具体步骤:

• 计算加权值: Rx4 + Gx10 + Bx2
• 红色的贡献是 Rx4
• 绿色的贡献是 Gx10
• 蓝色的贡献是 Bx2
• 右移 8 位: >> 8,即将计算结果除以 256。右移操作可以快速实现这种整数除法

理由:

使用加权平均是因为人眼对不同颜色的敏感度不同,通常对绿色最敏感,对红色次之,对蓝色最不敏感。这个公式中赋予了绿色较大的权重(10),而红色和蓝色的权重较小(4 和 2)

总结:

• 红色、绿色 和 蓝色通道按照不同的权重加在一起,计算得到灰度值
• 绿色的权重较高,符合人眼的感知特性
• 通过位移操作快速实现除法来缩放结果到 0-255 范围内