모든 웹사이트를 png로 바꾸는 방법

이 튜토리얼에서는 puppeteer를 사용하여 모든 웹사이트의 스크린샷/화면을 기록할 것입니다. Bun과 Nitro로 만든 전체 API 버전을 보려면 여기로 이동하세요.

전제 조건:

• 컴퓨터에 설치된 크롬
• 번(최상위 대기의 경우 동일한 결과를 위해 코드를 익스프레스 서버에 복사할 수도 있음)

모든 웹사이트의 스크린샷

Puppeteer는 모든 웹페이지의 스크린샷을 정말 쉽게 만들 수 있도록 했으며 표시 스크린샷이나 전체 페이지 스크린샷 간을 전환할 수 있는 옵션이 있는 스크린샷 API를 제공했습니다. 새로운 크롬 브라우저를 실행하고 웹사이트로 이동하여 스크린샷 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 형식과 30fps로 제한됩니다. 그래서 우리는 더 간단한 설정을 위해 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!