在本教程中，我們將使用 puppeteer 對(duì)任何網(wǎng)站進(jìn)行屏幕截圖/屏幕錄制。要獲得用面包和硝基制成的完整 api 版本，請(qǐng)?jiān)L問(wèn)此處。

先決條件：

• 您的計(jì)算機(jī)上安裝了 chrom
• bun（對(duì)于頂級(jí)等待，您也可以將代碼復(fù)制到快速服務(wù)器以獲得相同的結(jié)果）

截圖任何網(wǎng)站

Puppeteer 讓截屏任何網(wǎng)頁(yè)變得非常容易，他們提供了一個(gè)截屏 api，可以選擇在可見(jiàn)屏幕截圖或全頁(yè)屏幕截圖之間切換。您需要做的就是生成一個(gè)新的 chrome 瀏覽器，進(jìn)入該網(wǎng)站，并使用截圖 api 進(jìn)行截圖，該函數(shù)將返回圖像數(shù)據(jù)。

下面是shadcn ui登陸頁(yè)面的截圖代碼。

import puppeteer from 'puppeteer'

const url = 'https://ui.shadcn.com'

const browser = await puppeteer.launch()

const page = await browser.newPage()

await page.goto(url, {
    waitUntil: 'networkidle2',
})

const data = await page.screenshot({ fullPage: true })

await browser.close()

結(jié)果

平滑滾動(dòng)的屏幕錄制

Puppeteer 有內(nèi)置屏幕錄像機(jī)，請(qǐng)查看 https://pptr.dev/api/puppeteer.page.screencast，但您將被限制為 webm 格式和 30 fps。因此，我們將使用 puppeteer-screen-record 包來(lái)簡(jiǎn)化設(shè)置。

為了實(shí)現(xiàn)平滑滾動(dòng)，我們將模擬觸摸滾動(dòng)而不是鼠標(biāo)滾動(dòng)。

以下代碼將在 shadcn ui 上錄制整頁(yè)滾動(dòng)并將其寫(xiě)入 video.mp4。

import puppeteer from 'puppeteer'
import { PuppeteerScreenRecorder } from 'puppeteer-screen-recorder'

const browser = await puppeteer.launch()

const page = await browser.newPage()

await page.goto(url, {
    waitUntil: 'networkidle2',
})

const recorderOptions = {
    fps: 60,
}

const recorder = new PuppeteerScreenRecorder(page, recorderOptions)

await recorder.start('video.mp4')

const height = await page.evaluate(() => {
    return document.body.scrollHeight
})

// simulating touch scroll
const session = await page.createCDPSession()

await session.send('Input.synthesizeScrollGesture', {
    x: 0,
    y: 0,
    yDistance: -height,
    speed: 400,
})

await recorder.stop()

await browser.close()

添加深色模式

import puppeteer from 'puppeteer'

const url = 'https://ui.shadcn.com'

const browser = await puppeteer.launch()

const page = await browser.newPage()

// dark mode
await page.emulateMediaFeatures([
    {
        name: 'prefers-color-scheme',
        value: 'dark',
    },
])

await page.goto(url, {
    waitUntil: 'networkidle2',
})

const data = await page.screenshot({ fullPage: true })

await browser.close()

結(jié)果

就這樣，查看我的 github 上的其他項(xiàng)目，我喜歡從頭開(kāi)始實(shí)現(xiàn)東西，并通過(guò)開(kāi)源我的工作來(lái)分享我的知識(shí)。

以上是如何將任何網(wǎng)站變成png的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！