从网页中提取颜色列表
我需要从网页中提取颜色列表(颜色字段)。 (大约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