Question

我需要从网页中提取颜色列表（颜色字段）。（20-50种颜色，约30页差异）

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

Colorzilla（FF Extension）解析页面，但不按正确的顺序输出颜色。

http://www.colorcombos.com/是一个不错的网站，但也没有输出使用过的颜色代码列表。

到目前为止，每个解决方案都包括从firebug手动复制html或css代码，而不是提取所需的数据。

正如我上面所写的那样，我需要在许多颜色的网站上这样做。

最好的问候

编辑：

我正在使用CSS选择器来获取属性，并使用getComputedStyle（）我提取颜色。但getComputedStyle（）给我的颜色为rgb（）而不是hex。从元素中获取.style样式是不可能的，因为它是一个链接文件。

是否存在产生十六进制值的其他方式（除了使用函数将每个rgb值转换为十六进制）。此外，如何在URL上使用此命令document.querySelector（path）.getAttribute（attr）。我想运行一个本地js脚本，我在其中定义从哪里提取所需值的URL。

Answer 1

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

这是我提出的解决方案。通过xpath提取元素（但要注意我花了几个小时搞清楚casperjs是如何工作的，只是意识到有时casperjs的结构与FF不同。我通过Firebug得到了xpath。）并将它们写入csv文件。我的下一个任务是＆＃34;点击＆＃34;在一个元素上更改网站的动态部分和下载图片。我还没弄明白。

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();

从网页中提取颜色列表

1 个答案: