Screenshot erstellen #
Als gutes Tool zum Erstellen und bearbeiten von Screenshots empfehlen wir Snipaste. Via F1 lassen sich dadurch bestimmte Teile des Bildschirms abfotografieren, editieren und kopieren.
Dabei passt sich Snipaste automatisch an die Fenstergröße an, doch wie lässt sich die Fenstergröße des Browsers pixelgenau einstellen?
Fenster skalieren #
Hier kommt eine Chrome Extention ins Spiel, der Window Resizer. Neben vordefinierten Auflösungen lässt sich das hiermit das Browserfenster auch exakt anpassen. Doch nicht nur die Größe des gesamten Fensters, auch die des Viewports kann hier festgelegt werden. Zudem lassen sich Presets anlegen, um nicht jedes Mal von vorn zu beginnen.
Transparenter Hintergrund #
Standardmäßig befindet sich im Hintergrund des Govie Editors eine Vignette deren Farben im Editor selbst einstellen lassen. Dieser Hintergrund ist jedoch auch auf dem Screenshot enthalten und erschwert es, das 3D Modell freizustellen. Für einen Screenshot des Models mit transparentem Hintergrund kann jedoch einfach dieser Code in der Browserkonsole(*) des Govie Viewer ausführt werden:
window.requestAnimationFrame(() => { var link = document.createElement(‚a‘); link.download = ‚filename.png‘; link.href = document.getElementsByTagName(‚canvas‘)[0].toDataURL(„image/png“); link.click(); });
(*) Dazu einfach F12 drücken, auf Konsole gehen und den Code von oben im Eingabefeld reinkopieren und Enter drücken.
Sidebar verringert Auflösung des Viewport #
Wird die Sidebar in Chrome geöffnet (durch F12) so verkleinert sich der Viewport und das gespeicherte Bild hat nicht mehr die Auflösung, die wir vorher mittels Window Resizer definiert hatten. Um das zu umgehen, lässt sich die Sidebar loslösen. Drücken Sie oben rechtes auf die 3 Punkte und wählen das Separate Sidebar. Nun muss nur noch der Quellcode eingefügt werden und nach dem Drücken der Eingabetaste öffnet sich ein Dateidialog, mit dessen Hilfe sie das Bild speichern können.
window.requestAnimationFrame(() => { var link = document.createElement('a'); link.download = 'filename.png'; link.href = document.getElementsByTagName('canvas')[0].toDataURL("image/png"); link.click(); });
