2

我在想是否有可能获得网站的“特征”颜色。例如，TechCrunch 是绿色的，ReadWriteWeb 是红色的，CNN 也是红色的，Microsoft 是蓝色的，PHP 是紫色的，等等……

它不一定是准确的，只是一个最好的猜测。

我的一些想法是：

  • 解析所有 CSS 规则并找到匹配最多元素的规则
  • 解析所有 css 规则并找到具有最大尺寸的元素的背景颜色
  • 获取 body 元素的背景图像并获取其主要颜色（这对于图像是否可能）
  • 以某种方式找到站点的“标题”（DOM 中的第一个元素，设置了背景 css 属性？）并获取其背景

我还需要一种方法来消除黑色、灰色和白色。

这可行吗？你还有其他建议吗？

PS对不起我的英语

4

4 回答 4

5

可行的，肯定的。您可以使用该wget工具和一些简单的正则表达式来解析出 CSS 颜色。然后，您可以收集所有这些颜色并查看使用最多的颜色。然而，这并不总是能很好地表示网站中实际的主要颜色，因为在许多 CSS 规则中可能会出现几种颜色但并不经常使用。

这实际上是您在这里拥有的一个重要项目。

我的方法如下：

  • 下载并解析 CSS 颜色并查找不同颜色的总数。如果只有很少的颜色，您更有可能找到主要颜色。它通常是用于<a>标签或<h1>标签的颜色（但如果它们是灰色或黑色/白色，则不是）。
  • 解析时，您应该“汇集”颜色，以便例如#FFEEEE与 相同#FFEAEA，因为它们只是略有不同。
  • 您需要将不同的 CSS 颜色带入相同的格式，例如#FFF, #FFFFF, "white", rgb(255,255,255), 等等。
  • 你需要一个规则集和良好的编程知识
  • 找到图像中的主要颜色不再那么简单了。最简单的方法是针对每个像素的每个 R、G 和 B 分量来确定哪个是主要的。如果您的像素具有值R(120), G(240), B(80)，它很可能是绿色的。然后计算所有像素的数量并找到主要成分。
  • @mu 太短，建议将值转换为 HSV 并仅提取色调。
  • 另一种高级方法包括创建三个颜色分量的直方图，然后计算直方图下方的面积。

总而言之，在我看来，你定义的任务值得一篇论文:)

于 2011-01-12T14:40:01.590 回答
2

好的，这里有一些非常非正统的方法：

使用一些屏幕捕获包[1][2] 将给定的 URL 呈现为光栅图像（如 PNG）。如果您正在寻找平均值，则分析生成的光栅图像采样它的像素以获得平均值，或者给出阈值以将像素分组为“颜色组”。使用颜色组的平均或最大出现次数（使用哪种方法取决于对您最重要的事情），您可以获得页面中主要颜色的相当高的准确度表示。

[1] http://cutycapt.sourceforge.net/ [2] http://weblogs.mozillazine.org/roc/archives/2005/05/rendering_web_p.html

于 2011-01-12T16:37:58.483 回答
1

如何截取屏幕截图并使用GD lib之类的东西提取该图像中的主要颜色？

于 2011-01-12T17:04:04.953 回答
1

使用 Node.js、Phantomjs 和 Color-Thief

依赖项： Node-canvas（依赖于Cairo）、Webshot（依赖于Phantomjs）、Color-thief、个别包页面上列出的次要依赖项。

Webshot 是无头 Webkit Phantomjs 的轻量级包装器。
您可以使用它来截取页面的屏幕截图并将其存储在流中，下面是来自项目 Github 的示例代码。

var webshot = require('webshot');
var fs      = require('fs');

webshot('google.com', function(err, renderStream) {
  var file = fs.createWriteStream('google.png', {encoding: 'binary'});

  renderStream.on('data', function(data) {
    file.write(data.toString('binary'), 'binary');
  });
});

然后，您可以继续将图像传递给 Color-thief，它将为您提取所需的数据，请参阅项目示例页面以获取示例。

于 2014-02-16T13:59:41.083 回答