如何检测网页上的空白区域

Question

有没有办法使用JavaScript检测网页中没有文字或图像的空白区域？

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

编辑：我想让我的问题更清楚，我建立一个应该将搜索结果标记为值得信赖或垃圾邮件的扩展程序，我想要将我的标记放在结果项URL的文本末尾。 我也希望以通用的方式进行，因此它不仅适用于Google网页。一个例子如下所示：

Answer 1

您可以像这样测试正版空白区域：

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属性的对象。

<强> DEMO

document.elementFromPoint()，记录为here，是一种实验性技术＆＃34;，所以我不相信自己的生活。在所有目标平台上进行彻底测试。

修改

为了全面检测您寻找的所有白色，isWhiteSpace()将是两个阶段中的第一个。第二阶段将isVisualWhiteSpace()用@ remdevtec的方法实现。

由于我的isWhiteSpace(coords)价格便宜，你可以先执行它，只有当它返回false时才进行昂贵的测试。您可以使用||

的保护属性

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

但你真正的问题是写isVisualWhiteSpace()。我无能为力。

Answer 2

一种方法是使用窗口的屏幕截图。

您可以使用html2canvas之类的库将屏幕截图加载到HTML画布元素。

接下来，在window.onclick上，使用自动event参数获取点击坐标的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
}

当然，不好的一面是你必须知道你正在测试的网站的背景颜色，或者你点击的元素的背景颜色。

Answer 3

• 您可以构建一个包含页面宽度和长度的矩阵。
• 将所有矩阵单元格设置为零。
• 获取DOM的所有元素。
• 获取每个元素的x，y，宽度和高度，此链接可能有所帮助 Retrieve the position (X,Y) of an HTML element

• 在矩阵中绘制元素

   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 ;
  
          }
      }
   }
  

• 最后检查matrix[i][j]是否设为零或1