如何使用 Puppeteer 检测颜色? [英] How to detect a colour with Puppeteer?

问题描述

我一直在尝试使用 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)'
]

这是生成的调色板:

1. 截取页面截图
2. 生成该屏幕截图的调色板.

再次让我们截图这个页面:

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 检测颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！