在本教程中，我們將使用 puppeteer 對任何網(wǎng)站進(jìn)行螢?zāi)唤貓D/螢?zāi)讳浹u。要獲得用麵包和硝基製成的完整 api 版本，請?jiān)L問此處。

先決條件：

• 您的電腦上安裝了 chrom
• bun（對於頂級等待，您也可以將程式碼複製到快速伺服器以獲得相同的結(jié)果）

截圖任何網(wǎng)站

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

下面是shadcn ui登陸頁面的截圖程式碼。

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)的螢?zāi)讳浹u

Puppeteer 有內(nèi)建螢?zāi)讳浻皺C(jī)，請查看 https://pptr.dev/api/puppeteer.page.screencast，但您將被限制為 webm 格式和 30 fps。因此，我們將使用 puppeteer-screen-record 套件來簡化設(shè)定。

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

以下程式碼將在 shadcn ui 上錄製整頁滾動(dòng)並將其寫入 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)目，我喜歡從頭開始實(shí)現(xiàn)東西，並透過開源我的工作來分享我的知識。

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