Bagaimana untuk menukar mana-mana laman web menjadi png

Dalam tutorial ini kami akan menggunakan dalang untuk merakam tangkapan skrin/skrin mana-mana tapak web. Untuk versi api penuh yang dibuat dengan bun dan nitro pergi ke sini.

Prasyarat:

• kromium dipasang pada komputer anda
• bun (untuk tahap tertinggi menanti, anda juga boleh menyalin kod ke pelayan ekspres untuk hasil yang sama)

Tangkap skrin mana-mana tapak web

Puppeteer menjadikannya sangat mudah untuk tangkapan skrin mana-mana halaman web, mereka menyediakan api tangkapan skrin dengan pilihan untuk bertukar antara tangkapan skrin halaman yang kelihatan atau penuh. Apa yang anda perlu lakukan ialah menghasilkan penyemak imbas chrome baharu, pergi ke tapak web dan gunakan api tangkapan skrin untuk mengambil tangkapan skrin, fungsi tersebut akan mengembalikan data imej.

Berikut ialah kod berikut untuk tangkapan skrin halaman pendaratan 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()

Hasilnya

Rakam Skrin dengan tatal lancar

Puppeteer mempunyai perakam skrin terbina dalam, lihat https://pptr.dev/api/puppeteer.page.screencast, tetapi anda akan terhad kepada format webm dan 30 fps. Jadi kami akan menggunakan pakej rekod skrin dalang untuk persediaan yang lebih mudah.

Untuk melaksanakan penatalan yang lancar, kami akan mensimulasikan tatal sentuh dan bukannya tatal tetikus.

Kod berikut akan merakam tatal halaman penuh pada shadcn ui dan menulisnya ke 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()

Menambah Mod Gelap

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

Hasilnya

Itu sahaja, lihat github saya untuk projek saya yang lain, saya suka melaksanakan perkara dari awal dan berkongsi pengetahuan saya melalui sumber terbuka kerja saya.

Atas ialah kandungan terperinci Bagaimana untuk menukar mana-mana laman web menjadi png. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!