헤드리스 브라우저 이미지 품질-헤드리스 크롬, 팬텀 JS, 슬림 JS

헤드리스 브라우저에서 발생하는 상황에 대한 자세한 정보를 찾고 있습니다. 과거 에는 다른 사이트에서 스크린 샷을 찍기 위해 slimmerJS , Phantom.js 및 Headless Chrome 과 같은 다른 헤드리스 브라우저로 작업했습니다 .

브라우저에서 보는 것과 비슷한 실제적이고 선명한 화질의 이미지를 생성 할 수 없었습니다. 도구 한계처럼 보입니다. 왜, 그리고 아마도 더 나은 방법.

아래 예를 비교하십시오.

이 웹 사이트 ( https://en.wikipedia.org/wiki/Main_Page )의 왼쪽 상단에서 Wikipedia 로고를 찾으십시오.
이것은 puppeteer를 통해 헤드리스 크롬이 찍은 로고의 스크린 샷입니다.

실제 웹 사이트와 스크린 샷을 비교하면 이미지가 어떻게 흐려지는 지 볼 수 있습니다. 이 예제에서는 이미지 일 뿐이지 만 HTML 텍스트에서도 발생합니다.

이제 내 컴퓨터를 사용하여 스크린 샷을 찍으려면 Windows, mac, linux 인 것처럼 실제 거래처럼 보이는 고품질 스크린 샷을 얻을 수 있습니다.

왜 이런 일이 발생합니까? 각 라이브러리에서 최고 품질로 스크린 샷을 설정하고 스크린 샷이 적절한 해상도를 갖도록 충분히 큰 뷰포트를 설정하는 것과 같은 모든 표준 작업을 시도했습니다. 이것이 헤드리스 브라우저 스크린 샷에서 얻을 수있는 최고의 품질입니까?

이 분야에 대한 깨달음은 감사하겠습니다. 감사!

— 브루노 스 말도 네
소스

deviceScaleFactor를 2 (일명 망막 에뮬레이션)로 설정하면 더 나은 결과를 얻을 수 있습니다.

(async () => {
    const browser = await puppeteer.launch({ headless: false })
    const page = await browser.newPage();
    await page.setViewport({width: 800, height: 800, deviceScaleFactor: 2});
    await page.goto('https://en.wikipedia.org/wiki/Main_Page')

    await page.screenshot({ fullPage: true, path: 'test.png' })
})();

보시다시피 매우 괜찮은 결과를 얻을 수 있습니다.

출처 : https://github.com/puppeteer/puppeteer/issues/571

— 딱딱한
소스