In diesem Tutorial verwenden wir Puppeteer, um Screenshots/Bildschirmaufzeichnungen von beliebigen Websites zu erstellen. Eine vollst?ndige API-Version mit Br?tchen und Nitro finden Sie hier.

Voraussetzung:

• Chrom ist auf Ihrem Computer installiert
• Br?tchen (für Top-Level-Await k?nnen Sie den Code auch auf einen Express-Server kopieren, um das gleiche Ergebnis zu erzielen)

Machen Sie einen Screenshot einer beliebigen Website

Puppeteer hat es wirklich einfach gemacht, Screenshots jeder Webseite zu erstellen. Sie haben eine Screenshot-API mit der Option bereitgestellt, zwischen sichtbaren und ganzseitigen Screenshots zu wechseln. Sie müssen lediglich einen neuen Chrome-Browser starten, auf die Website gehen und mit der Screenshot-API einen Screenshot erstellen. Die Funktion gibt die Bilddaten zurück.

Hier ist der folgende Code zum Screenshot der Landingpage von 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()

Ergebnis

Bildschirmaufnahme mit sanftem Scrollen

Puppeteer verfügt über einen integrierten Bildschirmrekorder. Schauen Sie sich https://pptr.dev/api/puppeteer.page.screencast an. Sie sind jedoch auf das WebM-Format und 30 fps beschr?nkt. Zur einfacheren Einrichtung verwenden wir daher das Paket ?puppeteer-screen-record“.

Um ein reibungsloses Scrollen zu implementieren, simulieren wir einen Touch-Scroll anstelle eines Maus-Scrolls.

Der folgende Code zeichnet einen ganzseitigen Bildlauf auf der Shadcn-Benutzeroberfl?che auf und schreibt ihn in 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()

Hinzufügen des Dunkelmodus

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()

Ergebnis

Das ist alles, schauen Sie sich meinen Github für meine anderen Projekte an, ich liebe es, Dinge von Grund auf zu implementieren und mein Wissen durch Open Sourcing meiner Arbeit zu teilen.

Das obige ist der detaillierte Inhalt vonSo wandeln Sie jede Website in PNG um. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!