Javascript 如何检测网页上的空白

有没有一种方法可以使用JavaScript检测网页中没有文本或图像的空白区域

更准确地说，如何确定点[x，y]是否在空白区域内，如下面的示例（用红色标记）

编辑：我想让我的问题更清楚，我正在构建一个扩展，该扩展应该将搜索结果标记为值得信赖的或垃圾邮件，我想将我的标记放在结果项URL文本的末尾。 我还想用一种通用的方式，这样它就不会只在谷歌网页上工作。示例如下所示：

• 您可以使用页面的宽度和长度构建一个矩阵
• 将所有矩阵单元设置为零
• 获取DOM的所有元素
• 获取每个元素的x、y、宽度和高度，此链接可能会有所帮助
• 在矩阵中绘制元素

   for(k=0;k < dom_elements.length;k++) {
      for(i=dom_elements[k].y;i < dom_elements[k].length;i++) {
          for(j=dom_elements[k].x;j < dom_elements[k].width;j++) {
  
               matrix[i][j] = 1 ;
  
          }
      }
   }
  

  for（k=0；k

• 最后检查

  矩阵[i][j]

  是否设置为零或1

---

一种方法是使用窗口的屏幕截图
您可以使用类似于将屏幕截图加载到HTML画布元素的库
接下来，在

窗口上。单击

，使用自动

事件

参数获取单击坐标的RGBA数组：

var pixelData = canvas.getContext('2d').getImageData(
   event.offsetX,
   event.offsetY, 1, 1)
.data;

现在，如果所有（或至少前三个）

pixelData

的项等于255，则表示该点为白色

if (pixelData[0] == 255 && pixelData[1] == 255 && pixelData[2] == 255) {
  // the clicked point is white,
  // and if the background-color is white, 
  // it can be considered an empty point
}

当然，不利的一面是你必须知道你正在测试的站点的背景色，或者你点击的元素的背景色。
你可以像这样测试真正的空白：

function isWhiteSpace(coords) {
    var element = document.elementFromPoint(coords.x, coords.y);
    var whitespace = $(document).add("body, html");
    return (whitespace.get().indexOf(element) > -1) ? true : false;
}

其中，

coords

是具有

.x

和

.y

属性的对象

document.elementFromPoint（）

，被记录在案，是一项“实验性的技术”，所以我不会把我的生命托付给它。在所有目标平台上进行彻底测试

---

编辑
要完全检测您寻找的所有白色，两个阶段中的第一个阶段是

isWhiteSpace（）

。第二个阶段是

isVisualWhiteSpace（）

，例如使用@remdevtec的方法实现
由于我的

isWhiteSpace（coords）

价格低廉，您应该首先执行它，并且只有当它返回false时，才能执行昂贵的测试。您可以使用

| |

var isWhite = isWhiteSpace(coords) || isVisualWhiteSpace(coords);

---

但您真正的问题将是编写

isVisualWhiteSpace（）

。我没办法。
你用什么标准来计算某物是“空的”？举个例子，这个红点很可能是问题文本所在的div元素以及该div的父元素的一部分。看起来你只是在寻找html标记之间的空白，但我不是sure@SidneyLiebrand我想检测空白，即使它在标记中。（比如在我的例子中，在一个文本区域内）@user5729875我不知道你想用它来做什么，但这似乎是一个非常糟糕的主意，也许这是因为你在分享一个源于解决方案而不是实际问题的问题，如果我们知道实际问题，我们可能会有另一种更好/更容易解决的方法来提供帮助understand@SidneyLiebrand-换言之，可以将其与页面背景进行比较，而不是白色？这一点很好。如果您可以轻松访问相关的css代码（例如，如果您拥有该网站）。有趣的是，你可以在任何网站上使用这种方法，即使你没有可读的源代码。谢谢，我不想只使用真正的空白，我还想检测它是否在div.container中，甚至文本区域内段落之间的空白。我知道这一点，并且认为在检测“视觉”空白方面，如果不是技术问题，也存在大量的概念问题。假设您可以使用@remdevtec的工作方法，那么您可能想要区分“未占用”和“已占用”的空白。例如，考虑一个包含DIV的文本——你如何区分你想要检测的白色和文本中的白色，包括白色的封闭字符，例如“O”或“P”？你可能给自己安排了一项不可能完成的任务。