extract a list of colors from a webpage

I need to extract a list of colors (color fields) from a webpage. (20-50 colors of about 30 diff. pages)

I tried the eyedropper tool from firefox but 1. it has no shortcut and I don't have a good clipboard manager which lets me extract the colors for further use.

Colorzilla (FF Extension) parses the pages but doesn't output the colors in the right order.

http://www.colorcombos.com/ is a nice website but also doesn't not output a list of used color codes.

Every solution so far includes manually copying html or css code from firebug and than extracting the needed data.

As I wrote above I need to do that on many sites for many colors.

best regards

Edits:

I am using CSS Selectors to get an attribute and with getComputedStyle() I extract the color. But getComputedStyle() gives me the colors as rgb() not hex. Getting the style with .style from the element is not possible since it is a linked file.

Is there an other way than which yields the hex values (other than converting every rgb value to hex with a function). Moreover how can I use this command document.querySelector(path).getAttribute(attr) on an URL. I would like to run a local js script where I define the URL from where to extract the needed values.

---

The Answer to my question was Casperjs. A Regex or PHP script of the HTML Page was not the answer since it had to be rendered first

Here is my solution I came up with. Extracting elements via xpath (but be aware I spent hours figuring out how casperjs works only to realize that sometimes casperjs has a different structure than FF. I got the xpaths via Firebug.) and writing them to a csv file. The next task for me is to "click" on an element to change the dynamic parts of a site and to download pictures. Didn't figure that out yet.

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/2508.html

上一篇: 为什么不能使用我的字体颜色

下一篇: 从网页中提取颜色列表