8k Screenshots erstellen

[Wo bin ich hier]

ich würde sie gerne als pdf speichern, aber manche Websiten verstecken dabei manche Elemente. Diese sind dann auf der PDF nicht zu sehen

Um das XY-Problem zu umgehen, erkläre uns doch mal bitte das ursprüngliche Problem.
Dein Ziel ist es Webseiten in möglichst hoher Qualität (mit Erhalt des Textes) zu speichern?

 

[madmax2010]

wie dem auch sei, hab dir kurz ein script schreiben lassen, dass mit chromium einen "8k" monitor oder was auch immer emuliert, die website aufruft und als PDF speichert.

#!/usr/bin/env bash
set -euo pipefail

# export_website.sh
# Usage:
#   ./export_website.sh "https://www.heise.de" output.pdf
#   ./export_website.sh ./page.html output.pdf

INPUT="${1:-}"
OUTPUT="${2:-8k-output.pdf}"

WIDTH_PX=7680
HEIGHT_PX=4320

# 7680 / 96 = 80in, 4320 / 96 = 45in
PAGE_WIDTH_IN="80in"
PAGE_HEIGHT_IN="45in"

if [[ -z "$INPUT" ]]; then
  echo "Usage: $0 <url-or-html-file> [output.pdf]" >&2
  exit 1
fi

if [[ "$INPUT" =~ ^https?:// ]]; then
  TARGET="$INPUT"
else
  TARGET="file://$(realpath "$INPUT")"
fi

SCRIPT_DIR="$(cd -- "$(dirname -- "${BASH_SOURCE[0]}")" && pwd)"
TMPDIR="$(mktemp -d)"
trap 'rm -rf "$TMPDIR"' EXIT

cat > "$TMPDIR/export-pdf.js" <<'NODE'
const puppeteer = require('puppeteer-core');

(async () => {
  const target = process.env.TARGET;
  const output = process.env.OUTPUT;
  const width = Number(process.env.WIDTH_PX);
  const height = Number(process.env.HEIGHT_PX);
  const pageWidth = process.env.PAGE_WIDTH_IN;
  const pageHeight = process.env.PAGE_HEIGHT_IN;

  const browser = await puppeteer.launch({
    executablePath: '/usr/bin/chromium',
    headless: 'new',
    args: [
      `--window-size=${width},${height}`,
      '--force-device-scale-factor=1',
      '--disable-dev-shm-usage',
      '--no-sandbox'
    ]
  });

  const page = await browser.newPage();

  await page.setViewport({
    width,
    height,
    deviceScaleFactor: 1
  });

  await page.goto(target, {
    waitUntil: 'networkidle0',
    timeout: 120000
  });

  await page.emulateMediaType('screen');

  await page.addStyleTag({
    content: `
      @page {
        size: ${pageWidth} ${pageHeight};
        margin: 0;
      }

      html, body {
        width: ${width}px;
        height: ${height}px;
        margin: 0;
        padding: 0;
        overflow: hidden;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
      }
    `
  });

  await page.pdf({
    path: output,
    width: pageWidth,
    height: pageHeight,
    margin: {
      top: 0,
      right: 0,
      bottom: 0,
      left: 0
    },
    printBackground: true,
    preferCSSPageSize: true,
    scale: 1
  });

  await browser.close();
})().catch((err) => {
  console.error(err);
  process.exit(1);
});
NODE

TARGET="$TARGET" \
OUTPUT="$(realpath "$OUTPUT")" \
WIDTH_PX="$WIDTH_PX" \
HEIGHT_PX="$HEIGHT_PX" \
PAGE_WIDTH_IN="$PAGE_WIDTH_IN" \
PAGE_HEIGHT_IN="$PAGE_HEIGHT_IN" \
NODE_PATH="$SCRIPT_DIR/node_modules" \
node "$TMPDIR/export-pdf.js"

echo "Exported: $OUTPUT"

unter windows brauchst du jedoch WSL, weil nur unter linux nutzbar

 

[JumpingCat]

Ne, ich würde sie gerne als pdf speichern, aber manche Websiten verstecken dabei manche Elemente. Diese sind dann auf der PDF nicht zu sehen

Der Thread heißt doch Screenshots. Aktuelle Browser machen doch intern 1:1 Screenshots von dem was auf dem Bildschirm zu sehen ist. Da kommt png raus.

Wie kommst du jetzt auf PDF?

 

[madmax2010]

und ich habe mal dein vorhaben soweit verstanden gegoogled
https://devtoolstips.org/tips/en/take-high-res-screenshots/

gibt dazu einen haufen anleitungen
https://duckduckgo.com/?q=firefox+s...ature_name=requery&we_started_at=13-20-11_188

Wie kommst du jetzt auf PDF?

strg+p -> als pdf speichern
aber auch das ist nur ein screenshot

dachte, es gäbe eine einfache Möglichkeit, ohne IT Doktortitel💀

Was du gerade machst ist, stark überspitzt, als ob du mit dem Handy ein Foto vom Bildschirm machst, und dann von dem Foto auf dem Display des handies mit einem anderen Handy nochmal ein Foto.
Wie soll das besser werden? Ohne Komprimierung wird es im besten Fall nicht schlechter

 

[JumpingCat]

und ich habe mal dein vorhaben soweit verstanden gegoogled
https://devtoolstips.org/tips/en/take-high-res-screenshots/

Das ist ca 15 Jahre alt. Es gibt inzwischen direkt die Screenshot Funktion im Browser.

https://www.microsoft.com/en-us/edge/features/screenshot?form=MT0160
https://support.mozilla.org/de/kb/firefox-screenshots

 

[madmax2010]

@JumpingCat erst bester link, aber mit den entwickler Tools geht das relativ sicher

Ja, die gibt's, aber auch die bleiben dann bei der bildschirm Auflösung.
was meiner Meinung nach mehr als reicht.
keine Website hat ihre assets in höherer Auflösung. Den Aufwand macht sich keiner

 

[Philhcks98]

Von zur Hälfte Pixel Inhalten.

Ich hab leider den ganzen Kommentar nicht verstanden, sorry. Ich will nur einen Screenshot machen, aber mit einer Möglichkeit, eine 8k Auflösung aufzunehmen. Also Windows zu sagen, die Website einmal in UHD2 zu laden, dann ein UHD2 Screen zu machen, sodass dann die Pixelanzahl groß genug ist, um zu croppen

Ergänzung (Gestern um 15:28)

Webseiten

Nicht unbedingt ganze Websiten, sondern Teile davon. Wenn ich als Zwischenschritt, noch einmal croppen muss, wäre das kein Problem

 

[madmax2010]

Zoom rein bevor du den Screenshot machst.
Für die beste Qualität nutz die von @JumpingCat verlinkte Funktion.
spart dir crop und Qualitätsverlust bei 5 Umwegen

 

[Philhcks98]

assets

Mit assets meinst du Bilder? Mir gehts in erster Linie um Texte und Grafiken

 

[madmax2010]

Grafiken sind bilder, wenn nicht vektorisiert

 

[HisN]

DSR an, 8k einstellen. Desktop auf 8k stellen. Screenshots machen.

 

[Key3]

Ich dachte, es gäbe eine einfache Möglichkeit, ohne IT Doktortitel💀

Leichter geht es doch nicht um dein Problem zu umgehen, falls die sonstigen Skalierungsoptionen nicht greifen.

• Den Dongle kaufen und einstecken (Auflösung noch in den Einstellungen auf 8k30Hz einstellen)
• z.B. https://remotedesktop.google.com/support/

Installieren dann über den Browser (egal welcher) über https://remotedesktop.google.com/access/ drauf zugreifen und nur den Dummymonitor in 8k anzeigen lassen damit du deinen Ausschnitt raussuchen kannst und den Screenshotbereich auswählen.

 

[Philhcks98]

DSR an, 8k einstellen. Desktop auf 8k stellen. Screenshots machen.

Genau das hab ich gesucht. Funktioniert nur auf diese Art und Weise. Unter Custom Resolution ist es abgeschmiert. Danke!!

 

[wern001]

ich hab sowas füher mit DSRTool gemacht.
Damit konnte man Auflösungen höher als der Monitor kann erstellen und danach einstellen.
Ob das heute noch geht keine Ahnung.
Damit hab ich auf einem 2k Monitor eine 4k Auflösung eingestellt und die Screenshots hatten dann 4k Auflösung

Edit nachtrag:
@HisN hat es schon gesagt. Anscheinend wurde das jetzt direkt in die Nvidia Systemsteuerung eingebaut.

 

[Bodennebel]

Wenn Du eine Webseite als PDF speichern (und vielleicht noch etwas editieren willst vor dem Speichern) kannst du auch mal die Mozilla Firefox Erweiterungen "Print Edit WE" und "Save Page WE" ausprobieren. Skaliert dir allerdings die Webseite bzw. das PDF nicht auf 8K.