如何將任何網站變成png

在本教程中，我們將使用 puppeteer 對任何網站進行螢幕截圖/螢幕錄製。要獲得用麵包和硝基製成的完整 api 版本，請訪問此處。

先決條件：

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

截圖任何網站

Puppeteer 讓截圖任何網頁變得非常容易，他們提供了一個截圖 api，可以選擇在可見螢幕截圖或全頁螢幕截圖之間切換。您需要做的就是生成一個新的 chrome 瀏覽器，進入該網站，並使用截圖 api 進行截圖，該函數將返回圖像資料。

下面是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()

結果

平滑滾動的螢幕錄製

Puppeteer 有內建螢幕錄影機，請查看 https://pptr.dev/api/puppeteer.page.screencast，但您將被限制為 webm 格式和 30 fps。因此，我們將使用 puppeteer-screen-record 套件來簡化設定。

為了實現平滑滾動，我們將模擬觸控滾動而不是滑鼠滾動。

以下程式碼將在 shadcn ui 上錄製整頁滾動並將其寫入 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()

結果

就這樣，查看我的 github 上的其他項目，我喜歡從頭開始實現東西，並透過開源我的工作來分享我的知識。

以上是如何將任何網站變成png的詳細內容。更多資訊請關注PHP中文網其他相關文章！