1

让我解释。我不是在寻找特定 DOM 元素的特定属性。我开始想，如果我检查bodybackground-color元素的，我会找到页面的背景颜色。

但是以这个网站为例：性能自行车车身的背景颜色是黑色的，而网站的主要背景颜色是“明显的”是白色的。

所以，我正在用PhantomJS解析网站。您认为能够找到最“可见”的背景颜色的好策略是什么。我不知道怎么说，但对于人类来说，背景颜色是很明显的。如何以编程方式找到它？

编辑：自行车网站只是一个例子。我正在考虑如何为“任何”页面执行此操作。

4

5 回答 5

0

我会截取屏幕截图，然后制作图像的直方图以找到最常见的颜色。

改进：

  • 首先遍历并用“ ”替换所有文本内容
  • 对最靠近屏幕边缘的像素给予额外的权重。

（要在 PhantomJS 中完全自动化，您可以使用http://html2canvas.hertzen.com/之类的东西来使用画布，而无需制作外部图像文件。）

于 2013-11-14T03:07:49.573 回答
0

Performance Bikes 网站的背景颜色是 transparent。但是，由于一些奇怪的原因，他们决定将整个 maindiv设置为absolute位置，因此，body标签1px很高，因此显示默认的白色。我的一个想法是，您可以检查body' 的高度是否小于窗口的某个百分比。如果它太小，那么它可能是white，或者transparent对于某些特殊的浏览器。

替代方案包括截取页面并从中确定背景颜色。

于 2013-11-13T22:55:57.023 回答
0

这样的事情呢？

不完美，但应该返回具有最大面积的元素并确保它是可见的。不会考虑到它低于其他元素，但这是一个开始......

var element={
    width:0,
    height:0,
    color:'',
    jQEl:{}
}

$('*:visible').each(function(){
    var $this = $(this);
    var area = element.width*element.height;
    var thisArea = $this.width()*$this.height();
    if(thisArea>area){
        element.width = $this.width();
        element.height= $this.height();
        element.color=$this.css('background-color');
        element.jQEl=$this;
    }
});

console.log(element)
于 2013-11-13T23:16:30.650 回答
0

您可以使用 javascript 并检查哪些图层位于顶部，以及该 div 的宽度和高度，然后只需获取其 background-color 属性。

于 2013-11-13T22:59:40.867 回答
-1

另一个不错的解决方案是使用浏览器插件。我用滴管来镀铬。

https://chrome.google.com/webstore/detail/eye-dropper/hmdcmlfkchdmnmnmheododdhjedfccka?hl=en

或者你可以使用 Firefox 的 colorPicker。要获得它，在您的 Firefox 浏览器中，转到：

工具 -> 附加组件 -> 右上角搜索栏查找“colorPicker”

以这种方式在网站上查找背景颜色比通过 CSS 代码搜索要快 10 倍。

于 2013-11-13T23:06:56.420 回答