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

Finding background color of page or page view using Javascript

本文关键字：背景 颜色 视图 Javascript 使用 查找      更新时间：2023-09-26

我是一个有复杂问题的JS新手。我想找出任何网页的背景颜色。问题是，有时它是定义在正文标签，有时在内联或外部css和在一个更复杂的例子，一些网站不设置正文背景色(在某些情况下，他们也这样做)，但把一个DIV覆盖整个页面。我的问题是，我想找出整个视图的背景色。谁能帮帮我?

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

Thanks in advance

从这里开始。这将获得<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();
<<p> JSFiddle演示/strong>

您可以使用纯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. 获取所有DOM元素并绘制到画布:Mozilla - Drawing_DOM_objects_into_a_canvas

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

  • 获取像素颜色:Stack Overflow - Get -pixel-color-from-canvas-on-mouseover

    • 您可以用鼠标指针选择坐标，或者您可以简单地硬编码一个特定的像素(可能在页面的角落)。

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

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

    你可以访问几个网站，看看这是不是真的。我想实际上是这样的。这个方法还可以处理使用图像作为背景的情况。即使对于像这样的困难情况，它也比从嵌套块的关系中推断颜色要好得多，简单得多。尽管对于渐变、图案背景和丰富的颜色变化，它可能会给出不正确的结果。

    如何自动截图?

    您可以使用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脚本，应该会更简单。

    相关文章：