Chất lượng hình ảnh trình duyệt không đầu - Chrome không đầu, js ảo, js mỏng hơn

Tôi đang tìm kiếm thêm thông tin về những gì diễn ra dưới mui xe trong các trình duyệt không đầu. Tôi đã làm việc với các trình duyệt khác nhau không đầu trong quá khứ như slimmerJS , Phantom.js và Headless Chrome , với mục đích chụp ảnh màn hình trong các trang web khác nhau.

Tôi chưa bao giờ phải tạo ra một hình ảnh sắc nét, chất lượng thực sự giống với những gì bạn thấy trong trình duyệt, nó trông giống như một giới hạn công cụ, như, đó là chất lượng tối đa bạn có thể thoát khỏi điều này, nhưng tôi muốn hiểu Tại sao, và có thể, làm thế nào để làm cho nó tốt hơn.

Hãy so sánh các ví dụ dưới đây.

1. Trong trang web này, https://en.wikipedia.org/wiki/Main_Page , tìm logo Wikipedia ở góc trên cùng bên trái.
2. Đây là một ảnh chụp màn hình của logo đó được chụp bởi chrome không đầu thông qua con rối:

Nếu bạn so sánh trang web thật với ảnh chụp màn hình, bạn có thể thấy hình ảnh bị mờ như thế nào. Trong ví dụ này, nó chỉ là một hình ảnh, nhưng điều này cũng xảy ra với văn bản HTML.

Bây giờ, nếu tôi chụp ảnh màn hình bằng máy tính của mình, có thể là windows, mac, linux, tôi sẽ có được một ảnh chụp màn hình chất lượng rất tốt trông hoàn toàn giống như thật.

Vậy tại sao điều này xảy ra? Tôi đã thử tất cả những điều tiêu chuẩn như đặt ảnh chụp màn hình với chất lượng hàng đầu trong mỗi thư viện và đặt chế độ xem đủ lớn để ảnh chụp màn hình có độ phân giải khá. Đây thực sự là chất lượng hàng đầu bạn có thể nhận được từ một ảnh chụp màn hình trình duyệt không đầu?

Bất kỳ sự giác ngộ về lĩnh vực này sẽ được đánh giá cao. Cảm ơn!

Bạn sẽ nhận được kết quả tốt hơn khi đặt deviceScaleFactor thành 2 (còn gọi là mô phỏng võng mạc):

(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' })
})();

Như bạn thấy, bạn có thể nhận được kết quả rất tốt:

Nguồn: https://github.com/puppeteer/puppeteer/issues/571