如何将任何网站变成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中文网其他相关文章！