使用Node.js，Phantomjs和Color-Thief

Question

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

它不一定准确，只是最佳猜测。

我有些想法：

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

另外，我需要一种消除黑色，灰色和白色的方法。

这可行吗？你还有其他想法吗？

P.S。对不起我的英文

Answer 1

肯定是可行的。您可以使用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 is too short建议将值转换为HSV并仅提取色调。
另一种先进的方法包括创建三种颜色成分的直方图，然后计算直方图下的面积。

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

Answer 2

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

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

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

Answer 3

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

Answer 4

使用Node.js，Phantomjs和Color-Thief

依赖关系： Node-canvas（反过来取决于Cairo），Webshot（取决于Phantomjs），{{3} ，单个包页面上列出的次要依赖项。

Webshot是无头Webkit Phantomjs的轻量级包装您可以使用它截取您的网页的屏幕截图并将其存储在流中，示例代码位于Color-thief下方。

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，它会为您提取所需的数据from the project Github。

如何获得网站的主色？

4 个答案:

使用Node.js，Phantomjs和Color-Thief