Comment transformer n'importe quel site Web en png

Dans ce didacticiel, nous utiliserons le marionnettiste pour capturer/enregistrer n'importe quel site Web. Pour une version API complète réalisée avec bun et nitro, allez ici.

Prérequis :

• chrome installé sur votre ordinateur
• bun (pour une attente de haut niveau, vous pouvez également copier le code sur un serveur express pour le même résultat)

Capture d'écran de n'importe quel site Web

Puppeteer a rendu très facile la capture d'écran de n'importe quelle page Web, ils ont fourni une API de capture d'écran avec la possibilité de basculer entre une capture d'écran visible ou pleine page. Tout ce que vous avez à faire est de créer un nouveau navigateur Chrome, d'accéder au site Web et d'utiliser l'API de capture d'écran pour prendre une capture d'écran, la fonction renverra les données de l'image.

Voici le code suivant pour capturer la page de destination de 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()

Résultat

Enregistrement d'écran avec défilement fluide

Puppeteer a un enregistreur d'écran intégré, consultez https://pptr.dev/api/puppeteer.page.screencast, mais vous serez limité au format webm et à 30 ips. Nous allons donc utiliser le package puppeteer-screen-record pour une configuration plus simple.

Pour implémenter un défilement fluide, nous simulerons un défilement tactile au lieu d'un défilement de la souris.

Le code suivant enregistrera un défilement de page complète sur shadcn ui et l'écrira dans 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()

Ajout du mode sombre

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

Résultat

C'est tout, consultez mon github pour mes autres projets, j'aime implémenter des choses à partir de zéro et partager mes connaissances en open source mon travail.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!