问题描述
我一直在尝试使用 Puppeteer 检测网页上是否存在黄色.任何有关如何实现这一点的见解将不胜感激!
I have been trying to detect the presence of the colour yellow on a web page using Puppeteer. Any insight on how this may be possible would be greatly appreciated!
推荐答案
With getComputedStyle
您可以通过在页面的所有元素上应用 getComputedStyle
来获取页面的颜色:
let colr = new Set();
document.body.querySelectorAll('*').forEach(n => {
colr.add(window.getComputedStyle(n).color);
colr.add(window.getComputedStyle(n).backgroundColor);
});
colr = [...colr];
或者在这个页面使用 Puppeteer:
Or with Puppeteer for this page:
// from-dom.js
const puppeteer = require('puppeteer-core');
module.exports = async () => {
// I'm running Puppeteer against Chrome in Docker. Change where necessary please.
const browser = await puppeteer.connect({ browserWSEndpoint: 'ws://localhost:3000' });
const page = await browser.newPage();
await page.goto('https://stackoverflow.com/q/64839035/1244884');
const colors = await page.evaluate(() => {
let colr = new Set();
document.body.querySelectorAll('*').forEach(n => {
colr.add(window.getComputedStyle(n).color);
colr.add(window.getComputedStyle(n).backgroundColor);
});
colr = [...colr];
return colr;
});
await browser.close();
console.log(colors);
};
node -p -e 'require("./from-dom.js")()'
哪个返回:
[
'rgb(36, 39, 41)', 'rgba(0, 0, 0, 0)',
'rgb(250, 250, 251)', 'rgb(0, 119, 204)',
'rgb(132, 141, 149)', 'rgb(60, 65, 70)',
'rgb(255, 255, 255)', 'rgb(83, 90, 96)',
'rgb(12, 13, 14)', 'rgb(106, 115, 124)',
'rgb(214, 217, 220)', 'rgb(187, 192, 196)',
'rgb(244, 128, 36)', 'rgb(57, 115, 157)',
'rgb(225, 236, 244)', 'rgb(0, 149, 255)',
'rgb(239, 240, 241)', 'rgb(244, 248, 251)',
'rgb(59, 64, 69)', 'rgb(27, 64, 114)',
'rgb(209, 229, 241)', 'rgb(228, 230, 232)',
'rgb(0, 0, 0)', 'rgb(253, 247, 227)',
'rgb(61, 143, 88)', 'rgb(209, 56, 61)',
'rgb(57, 86, 151)', 'rgb(239, 239, 239)',
'rgb(192, 45, 46)', 'rgb(192, 72, 72)',
'rgb(251, 242, 212)', 'rgb(94, 186, 125)',
'rgba(12, 13, 14, 0.5)'
]
这是生成的调色板:
- 截取页面截图
- 生成该屏幕截图的调色板.
再次让我们截图这个页面:
Here again let's screenshot this page:
// from-picture.js
const puppeteer = require('puppeteer-core');
const path = require('path');
const getColors = require('get-image-colors');
module.exports = async () => {
// I'm running Puppeteer against Chrome in Docker. Change where necessary please.
const browser = await puppeteer.connect({ browserWSEndpoint: 'ws://localhost:3000' });
const page = await browser.newPage();
await page.goto('https://stackoverflow.com/q/64839035/1244884');
await page.screenshot({path: 'screenshot.png'});
await browser.close();
const options = {count: 10, type: 'image/png'};
const colors = await getColors(path.join(__dirname, 'screenshot.png'), options);
console.log(colors.map(c => c.css()));
};
node -p -e 'require("./from-picture.js")()'
哪个返回:
[
'rgb(55,76,87)',
'rgb(250,250,251)',
'rgb(150,161,169)',
'rgb(242,133,38)',
'rgb(92,176,224)',
'rgb(203,214,223)',
'rgb(157,90,31)',
'rgb(226,204,156)',
'rgb(244,180,132)'
]
这是截图.png ;)
Here's screenshot.png ;)
这是调色板:
这个很棘手.如何判断 rgb(61, 143, 88)
是否为 ± 黄色?
This one is tricky. How can you tell if rgb(61, 143, 88)
is ± yellow?
应该可以使用诸如 chroma-js 之类的库进行检查如果颜色在黄色范围内"但我不知道该怎么做.
It should be possible with a library such as chroma-js to sort of check if a colour is "within the yellow scale" but I have no idea how to do this.
我发现了这篇可能有帮助的旧帖子:在颜色范围内找到最接近的颜色匹配
I found this old post which may help:Find closest colour match within range of colours
希望这足以让您入门;)
Hopefully this is enough to get you started ;)
这篇关于如何使用 Puppeteer 检测颜色?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!