Bildqualität des Headless-Browsers - Headless-Chrom, Phantom-JS, schlankeres JS

11

Ich suche nach weiteren Informationen darüber, was in kopflosen Browsern unter der Haube geschieht. Ich habe in der Vergangenheit mit verschiedenen Headless-Browsern wie slimmerJS , Phantom.js und Headless Chrome gearbeitet , um Screenshots auf verschiedenen Websites zu erstellen .

Ich musste nie ein wirklich aussehendes Bild mit scharfer Qualität erzeugen, das dem ähnelt, was Sie im Browser sehen. Es sieht nach einer Werkzeugbeschränkung aus. Das ist die maximale Qualität, die Sie daraus ziehen können, aber ich möchte verstehen warum und möglicherweise wie man es besser macht.

Bitte vergleichen Sie die folgenden Beispiele.

  1. Auf dieser Website, https://en.wikipedia.org/wiki/Main_Page , finden Sie das Wikipedia-Logo in der oberen linken Ecke.
  2. Dies ist ein Screenshot des Logos, das von kopflosem Chrom durch Puppenspieler aufgenommen wurde:

Geben Sie hier die Bildbeschreibung ein

Wenn Sie die reale Website mit dem Screenshot vergleichen, können Sie sehen, wie das Bild unscharf wird. In diesem Beispiel handelt es sich nur um ein Bild, dies geschieht jedoch auch bei HTML-Text.

Wenn ich jetzt einen Screenshot mit meinem Computer machen würde, sei es Windows, Mac, Linux, würde ich einen Screenshot von sehr guter Qualität erhalten, der völlig wie der echte Deal aussieht.

Warum passiert das? Ich habe alle gängigen Dinge ausprobiert, wie das Einstellen des Screenshots mit höchster Qualität in jeder Bibliothek und das Einstellen eines ausreichend großen Ansichtsfensters, damit der Screenshot eine anständige Auflösung hat. Ist dies wirklich die beste Qualität, die Sie von einem Headless-Browser-Screenshot erhalten können?

Jede Aufklärung in diesem Bereich wäre willkommen. Vielen Dank!

node.js screenshot puppeteer google-chrome-headless headless-browser Bruno Smaldone
quelle

Antworten:

7

Sie erhalten bessere Ergebnisse, wenn Sie den deviceScaleFactor auf 2 setzen (auch bekannt als Netzhaut emulieren):

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

Wie Sie sehen können, können Sie sehr anständige Ergebnisse erzielen:

Geben Sie hier die Bildbeschreibung ein

Quelle: https://github.com/puppeteer/puppeteer/issues/571

hartkodiert
quelle