使用 Javascript 查找页面或页面视图的背景颜色答案

【问题标题】：Finding background color of page or page view using Javascript使用 Javascript 查找页面或页面视图的背景颜色
【发布时间】：2014-07-24 19:56:50
【问题描述】：

我是一个有复杂问题的 JS 新手。我想找出任何网页的背景颜色。问题是有时它是在 body 标记中定义的，有时是在内联或外部 css 中定义的，在更复杂的示例中，某些网站不会在 body 上设置背景颜色（在某些情况下它们也会这样做），而是放置一个覆盖整个页面。所以我的问题是我想找出整个视图的背景颜色。谁能帮帮我。

在发布这个问题之前我已经尝试过搜索，但我只找到了获取正文颜色而不是整个视图的背景的方法，所以请不要将其标记为重复。

提前致谢

【问题讨论】：

按照自己的方式完成每一项。它不是那么难。如果 body 有背景......否则如果第一个 div 有背景......等等。
查看这个问题的答案可能会有所帮助：stackoverflow.com/questions/4256339/…
我不认为你会得到一个完整的答案，因为涉及的变量太多了。它怎么知道覆盖整个页面的div 是用于背景的？然而，无论是在 inline 还是在 external 样式表中，从 body 标签中获取背景颜色都非常简单。
嗨 a4arpan！我们知道页面的标记是什么吗？我们是否仅在元素具有至少 100% 的宽度和 100% 的高度时才考虑背景？万一背景有 CSS3 渐变，是否也要采用呢？
@a4arpan 另见Get the document's background color

标签： javascript html css

【解决方案1】：

截屏，然后找出最常见的颜色。

最常见的颜色和背景一样吗？

您可以访问几个网站，看看是否属实。我想出于所有实际目的，它是。此方法还可以处理将图像用作背景的情况。即使对于像these 这样的困难情况，它也比尝试从嵌套块的关系中推断颜色要好得多，也简单得多。虽然它可能会为渐变、图案背景和丰富的颜色变化提供不正确的结果。

如何自动截屏？

您可以使用 PhantomJS 捕获屏幕截图，然后将其保存为 png 文件。 This page 应该解释一下细节。不要忘记lower viewport resolution 以减少工作量。

如何找到最常见的颜色？

您可以使用NodeJS、Python、PHP 或任何具有适当工具的语言来完成。只需遍历像素，将颜色频率存储在哈希表中，然后找到与最大值关联的键。在伪代码中：

table = new HashTable()

# Count the colors
for pixel in pixels:
    if pixel.color not in table.keys:
        table[pixel.color] = 0
    table[pixel.color]++

# Find the color associated with the max count
result = table[table.keys[0]]
for color in table.keys:
    if table[color] > table[result]:
        result = color

print(result)

您可以将图像分成 10x10 块并从每个块中选择一个像素以减少计算量，但低分辨率已经完成了同样的工作，甚至更好：IO 也更少。

如何将这些部分组合在一起？

PhantomJS 具有NodeJS API，因此您可以在单个脚本中解析页面并查找背景颜色。对于其他语言，您可以将 PhantomJS 命令作为外部进程调用并等待它完成。 PHP 和 Python 的相关文档。或者只是 Bash，如果您可以编写 Bash 脚本，它应该会更简单。

【讨论】：

【解决方案2】：

理论上，您可以使用画布元素将网页绘制到其中，然后检查特定像素以查看它是什么颜色：

获取所有 DOM 元素并绘制到画布上：Mozilla - Drawing_DOM_objects_into_a_canvas

使用脚本，您需要克隆相关页面的内容，然后将其粘贴到画布元素中。

获取像素颜色：Stack Overflow - get-pixel-color-from-canvas-on-mouseover

您可以使用鼠标指针选择坐标，或者您可以简单地对特定像素进行硬编码（也许在页面的角落）。

【讨论】：

【解决方案3】：

您可以使用纯 javascript 或 jquery 来实现您想要的。做你想做的事，你可以使用这个函数

按标记名查找：

function getBackgroundByTagName(tag){
    var color =  $(tag).css('background-color');
    console.log(color);
}

按类别查找：

function getBackgroundByClassName(classname){
    var color =  $('.'+classname).css('background-color');
    console.log(color);
}

按id查找

function getBackgroundById(idofelement){
    var color =  $('.'+idofelement).css('background-color');
    console.log(color);
}

您需要做的就是运行任何功能，它会在控制台中显示颜色。

【讨论】：

【解决方案4】：

这是一个开始。这将获得<body> 标签的background-colour，无论是inline 还是外部stylesheet。

function getBackground() {

    var getBody = document.getElementsByTagName("body")[0]
    var prop = window.getComputedStyle(getBody).getPropertyValue("background-color");

    if (prop === "transparent") {
        console.log("No background colour set")
    } else {
        console.log(prop);
    }
}

getBackground();

JSFiddle Demo

【讨论】：