logo标签列表

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

javascripthtmlcss
5
我是一名JS新手，面临一个复杂的问题。我想找出任何网页的背景颜色。问题是有时它在标记中定义，有时在内联或外部CSS中定义，在一些更复杂的例子中，有些网站不会在上设置背景颜色（在某些情况下也会这样做），但会放置一个覆盖整个页面的
。所以我的问题是我想找到整个视图的背景颜色。请问是否有人能够帮助我？
我已经尝试过在发布这个问题之前进行搜索，但只找到了获取颜色而不是整个视图背景的方法，因此请不要将其标记为重复问题。
提前感谢！
1
只需逐个解决它们即可，这并不难。如果body有背景......否则如果第一个div有背景......等等。 - Ruddy
谢谢Ruddy，但是我有一些例子，在这些例子中背景颜色是在body中定义的，但是覆盖整个页面的div却有其他的背景颜色。 - a4arpan
1
请查看这个问题的答案，它可能会有所帮助：https://dev59.com/Xm855IYBdhLWcg3wlVca - Ryan Brewer
1
我认为你不会得到一个完整的答案，因为涉及到很多变量。它如何知道覆盖整个页面的 div 是用于背景的？然而，从 body 标签获取背景颜色，无论是 inline 还是在 external 样式表中都非常简单。 - Nick R
1
嗨a4arpan！我们知道页面的标记是什么吗？如果元素至少具有100％的宽度和100％的高度，我们才考虑背景吗？如果背景上有CSS3渐变，是否也应该考虑？ - Ivan Chaer
1
@a4arpan 请参阅获取文档背景颜色。 - guest271314
4个回答
6

以下是一些开始的代码。这段代码可以获取<body>标签的background-color，不论它是内联的还是在外部的样式表中。

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

2
你可以使用纯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);
}

您只需要运行任何一个函数，它就会在控制台中显示颜色。

1

制作屏幕截图，然后找到最常见的颜色。

最常见的颜色是否与背景相同？

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

如何自动化截屏？

您可以使用PhantomJS捕获屏幕截图，然后将其保存为png文件。 这个页面应该会解释详细信息。不要忘记降低视口分辨率以减少工作量。

如何找到最常见的颜色？

你可以使用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脚本编写，那么应该更简单。
1

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

  1. 获取所有DOM元素并将它们绘制到画布中：Mozilla - Drawing_DOM_objects_into_a_canvas

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

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

您可以使用鼠标指针选择坐标，或者可以简单地硬编码一个特定像素（例如页面角落的像素）。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接