用 puppeteer 抓取背景图像

Question

谁能解释我如何使用 Puppeteer 从网页中抓取背景图片？图像在图像背景类中，但其中没有存储任何内容。 jpg URL 在

element.style { 背景图片：url('https://xxxxx.jpg')

如何抓取 URL 'https://xxxxx.jpg'？

谢谢

Answer 1

我对正则表达式了解不多，但通过这种方式完成了。

 const backgroundImage = await page.evaluate(el => window.getComputedStyle(el).backgroundImage, await page.$('.home-masthead'))

 const backgroundImageUrl = backgroundImage.substring(5,backgroundImage.length-2);

Answer 2

您将需要window.getComputedStyle 来检索元素的 CSS 属性。

示例：

• 网页： https://developer.mozilla.org/en-US/
• 选择器： .home-masthead
• bg 图片： element.style { 背景图片： url('https://developer.mozilla.org/static/img/home-masthead-background.37a14f03abee.svg')

您可以在 Chrome DevTools 中测试一下如何达到预期的效果。

getComputedStyle($('.home-masthead')).backgroundImage

Get the right property with chrome dev tools

那么 puppeteer 脚本可以是这样的：

const puppeteer = require('puppeteer')

async function getBackgroundImage() {
  try {
    const browser = await puppeteer.launch({ headless: false })
    const page = await browser.newPage()
    await page.goto('https://developer.mozilla.org/en-US/')

    const backgroundImage = await page.evaluate(el => window.getComputedStyle(el).backgroundImage, await page.$('.home-masthead'))
    console.log(backgroundImage)

    await browser.close()
  } catch (e) {
    console.error(e)
  }
}
getBackgroundImage()

结果：

url("https://developer.mozilla.org/static/img/home-masthead-background.37a14f03abee.svg")

在这之后你只需要清理一下字符串，我会用正则表达式match()来做，这样你就可以得到两个模式之间的内容，例如：

const backgroundImageCleaned = backgroundImage.match(/url\("(.*)"/)[1] 

当然，在您的情况下，子字符串方法以及此 CSS 属性将始终具有相同的格式。