从网页中提取颜色列表

我需要从网页中提取颜色列表(颜色字段)。 (大约30页的20-50种颜色)

我尝试了firefox的吸管工具,但是1.它没有捷径,我没有一个好的剪贴板管理器,可以让我提取颜色以供进一步使用。

Colorzilla(FF Extension)会分析页面,但不会以正确的顺序输出颜色。

http://www.colorcombos.com/是一个很好的网站,但也不会输出使用颜色代码的列表。

到目前为止,每个解决方案都包括从萤火虫手动复制html或css代码,并提取所需的数据。

正如我上面写的,我需要在许多网站上为很多颜色做到这一点。

最好的祝福

编辑:

我使用CSS选择器来获取属性,并使用getComputedStyle()提取颜色。 但getComputedStyle()给我的颜色为rgb()而不是十六进制。 从元素获取.style的样式是不可能的,因为它是一个链接文件。

有没有其他的方式产生十六进制值(除了每个rgb值转换为十六进制函数)。 此外,我怎样才能在URL上使用这个命令document.querySelector(path).getAttribute(attr)。 我想运行一个本地js脚本,在其中定义从哪里提取所需值的URL。


我的问题的答案是Casperjs。 HTML页面的正则表达式或PHP脚本不是答案,因为它必须先呈现

这是我提出的解决方案。 通过xpath提取元素(但是请注意,我花了几个小时计算出casperjs如何工作,只是意识到有时casperjs的结构与FF不同,我通过Firebug获得了xpath),并将它们写入一个csv文件。 对我来说,下一个任务是“点击”元素以更改网站的动态部分并下载图片。 还没有弄清楚。

var fs = require('fs');
var x      = require('casper').selectXPath;
//var c      = {};
var links = []

function writeCSV(h,j) {

    var stream = fs.open('attribute.csv','aw');
    var data = h;
    var title = j;

    for (var i in data) {
        var c = rgb2hex(data[i]['colors']);
        //this.echo(data[i]['ref']);
        if (i==1) {
            stream.writeLine(','+ title + ' Shade,"' + data[i]['name'] + '","' + c + '"');
        } else {
            stream.writeLine(',,"' + data[i]['name'] + '","' + c + '"');           
        }
        stream.flush();
    }
    stream.close();
}

function consoleOutput(h) {
    //var h = casper.data;
    for (var i in h) {
        //this.echo(data[i]['ref']);
        casper.echo(h[i]['name']);
        casper.echo(h[i]['colors']);
    }
    return;
}

function rgb2hex(rgb) {
    rgb = rgb.match(/^rgb((d+),s*(d+),s*(d+))$/);
    return "#" +
    ("0" + parseInt(rgb[1],10).toString(16)).slice(-2) +
    ("0" + parseInt(rgb[2],10).toString(16)).slice(-2) +
    ("0" + parseInt(rgb[3],10).toString(16)).slice(-2);
}

var casper = require('casper').create({   
    verbose: true, 
    logLevel: 'debug',
    userAgent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_8) AppleWebKit/537.22 (KHTML, like Gecko) Chrome/25.0.1364.172 Safari/537.22',
    pageSettings: {
        loadImages:  true,
        loadPlugins: false     
    },
    clientScript: 'http://code.jquery.com/jquery-2.1.1.min.js',
    viewportSize: {
        width: 1440,
        height: 900
    }
});

casper.start().each(links,function(self,link) {
    self.thenOpen(link, function() {
        var data = this.evaluate(function() {
            var n = 1;
            var a = {};
            var z = {};
            var b;

            while (b = __utils__.getElementByXPath("/html/body/div[3]/ul/li["+n+"]/a")) {
                //$().click();
                //var ref = __utils__.getElementByXPath("/html/body/div[1]/div[6]/article/div/small").textContent;
                var y = this.getComputedStyle(b.firstChild).getPropertyValue('background-color');

                z = {'name' : b.textContent};
                z['colors'] = y;

                a[n] = z;
                n++;
            }

            return a;
        });

        var title = this.getElementInfo(x("/html/body/div[1]/div[6]/article/div/h1")).text.trim();
        //this.echo(title);
        //consoleOutput(data);
        writeCSV(data,title);
    });
});

//casper.then(consoleOutput);

casper.run();
链接地址: http://www.djcxy.com/p/2507.html

上一篇: extract a list of colors from a webpage

下一篇: Is there such a thing as min