ウェブサイトを PNG に変換する方法

このチュートリアルでは、puppeteer を使用して Web サイトのスクリーンショット/画面録画を行います。 bun と nitro で作成された完全な API バージョンについては、ここにアクセスしてください。

前提条件:

• お使いのコンピュータにインストールされているクロム
• bun (トップレベルの await の場合、同じ結果を得るためにコードを Express サーバーにコピーすることもできます)

あらゆるWebサイトのスクリーンショットを撮る

Puppeteer は、あらゆる Web ページのスクリーンショットを非常に簡単に作成できるようにし、表示スクリーンショットとページ全体のスクリーンショットを切り替えるオプションを備えたスクリーンショット API を提供しました。新しい Chrome ブラウザを起動し、Web サイトにアクセスし、スクリーンショット 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 中国語 Web サイトの他の関連記事を参照してください。