Screenshots von Webseiten oder HTML-Dateien erstellen
🤖/html/convert erstellt Screenshots von Webseiten oder hochgeladenen HTML-Seiten.

Statt einer HTML-Eingabedatei kann eine URL angegeben werden, um einen Screenshot der Website zu erstellen, auf die diese URL verweist.
Verwenden Sie 🤖/image/resize, um die Größe des Screenshots nach Bedarf zu ändern oder ihn zuzuschneiden.
Anwendungsbeispiel
Einen vollständigen Screenshot der Transloadit-Startseite erstellen:
{
"steps": {
"captured": {
"robot": "/html/convert",
"url": "https://transloadit.com"
}
}
}Parameter
interpolateboolean | Record<string, boolean>Steuert, ob einzelne Robot-Anweisungsfelder Assembly Variables interpolieren.
Standardmäßig interpolieren die meisten Robot-Anweisungsfelder Assembly Variables. Mit dem Wert
falsebehandeln Sie alle Anweisungsfelder als Literaltext. Wenn Sie stattdessen einen einzelnen Feldpfad auffalsesetzen, wird nur dieses Feld als Literaltext behandelt. Bei Feldern eines bestimmten Robots, die standardmäßig als Literaltext behandelt werden, aktivieren Sie die Interpolation wieder, indem Sie hierfürtruefestlegen oder für den jeweiligen Feldpfad den Werttrueverwenden.Verwenden Sie Feldnamen wie
pathoder für verschachtelte Objekte Punktpfade wieffmpeg.vfals Pfadangabe.output_metaRecord<string, boolean> | boolean | Array<string>Damit können Sie eine Reihe von Metadaten festlegen, deren Berechnung mehr CPU-Ressourcen beansprucht. Sie sind daher standardmäßig deaktiviert, damit Ihre Assemblies schnell verarbeitet werden.
Für Bilder können Sie diesem Objekt den Eintrag
"has_transparency": truehinzufügen, um zu ermitteln, ob das Bild transparente Bereiche enthält. Mit dem Eintrag"dominant_colors": truekönnen Sie außerdem ein Array mit hexadezimalen Farbcodes aus dem Bild extrahieren.Für Bilder können Sie auch den Eintrag
"blurhash": truehinzufügen, um einen BlurHash zu extrahieren – eine kompakte Darstellung eines Platzhalters für das Bild, mit der Sie eine unscharfe Vorschau anzeigen können, während das vollständige Bild geladen wird.Für Videos können Sie den Parameter
"colorspace": truehinzufügen, um den Farbraum des Ausgabevideos zu extrahieren.Für Videos können Sie außerdem den Eintrag
"interlaced": truehinzufügen, um zu erkennen, ob das Video im Zeilensprungverfahren vorliegt. Dazu wird die ressourcenschonende ffprobe-Optionfield_ordermit einem begrenzten Stichprobendurchlauf mithilfe vonidetüber die ersten Frames der Quelle kombiniert. Die Ergebnisseinterlacedundfield_ordersowie das Diagnoseobjektinterlace_detectionwerden dabei unterfile.metaausgegeben. Dies ist rechenintensiv und wird entsprechend abgerechnet.Für Audio können Sie den Eintrag
"mean_volume": truehinzufügen, um einen einzelnen Wert für die durchschnittliche Lautstärke der Audiodatei zu erhalten.Sie können diesen Parameter auch auf
falsesetzen, um die Metadatenextraktion zu überspringen und das Transcoding zu beschleunigen.user_metaRecord<string, any>(Standard:{})Fügt jeder von diesem Robot ausgegebenen Datei benutzerdefinierte Metadaten hinzu, ohne den Dateiinhalt zu verändern.
Die Werte werden mit allen bereits in der Eingabedatei enthaltenen
user_metazusammengeführt. Wenn beide Objekte denselben Schlüssel enthalten, hat der Wert dieses Robots Vorrang. Assembly Variables werden unterstützt, zum Beispiel{ "internal_file_id": "${file.id}" }.resultboolean(Standard:false)Ob die Ergebnisse dieses Steps im Assembly Status JSON enthalten sein sollen
queuebatchWenn Sie die Queue auf „batch“ setzen, wird die Priorität der Jobs für diesen Step manuell herabgestuft. So vermeiden Sie, Priority Job Slots für Jobs zu belegen, die keine Wartezeit von null in der Queue benötigen.
force_acceptboolean(Standard:false)Erzwingt, dass ein Robot einen Dateityp akzeptiert, den er sonst ignorieren würde.
Standardmäßig ignorieren Robots Dateien, deren Typ sie nicht kennen. 🤖/video/encode ignoriert beispielsweise problemlos Eingabebilder.
Wenn Sie den Parameter
force_acceptauftruesetzen, können Sie erzwingen, dass Robots alle übergebenen Dateien akzeptieren. Dies führt in der Regel zu Fehlern und sollte nur zur Fehlersuche oder zur Behandlung von Grenzfällen verwendet werden.ignore_errorsboolean | Array<meta | execute>(Standard:[])Fehler in bestimmten Verarbeitungsphasen ignorieren.
Wenn Sie hierfür
["meta"]festlegen, ignoriert der Robot Fehler bei der Metadatenextraktion.Wenn Sie hierfür
["execute"]festlegen, ignoriert der Robot Fehler während der Hauptausführungsphase.Wenn Sie hierfür
truefestlegen, entspricht dies["meta", "execute"]und Fehler in beiden Phasen werden ignoriert.usestring | Array<string> | Array<object> | objectGibt an, welche Steps als Eingabe verwendet werden sollen.
- Sie können beliebige Namen für Steps wählen, außer
":original"(reserviert für von Transloadit verarbeitete Benutzer-Uploads) - Sie können mehrere Steps mithilfe von Arrays als Eingabe angeben:
{ "use": [ ":original", "encoded", "resized" ] } - Sie können Eingabe-Steps außerdem mit
askennzeichnen, um Robots die semantische Funktion zu übermitteln:{ "use": [ { "name": ":original", "as": "image" }, { "name": ":original", "as": "mask" } ] }
TippDas ist wahrscheinlich alles, was Sie über
usewissen müssen. Sie können sich jedoch auch die erweiterten Anwendungsfälle ansehen.- Sie können beliebige Namen für Steps wählen, außer
urlstring | null(Standard:null)Die URL der zu konvertierenden Webseite. Sie ist optional, da Sie auch HTML-Dateien hochladen oder importieren und an den Robot übergeben können.
formatjpeg | jpg | pdf | png(Standard:"png")Das Format des resultierenden Bildes.
fullpageboolean(Standard:true)Legt fest, ob ein Screenshot der gesamten Seite erstellt werden soll.
Bei der Einstellung
truehat der Parameterheightkeine Auswirkung, da die Höhe von Websites variiert. Sie können die Größe des resultierenden Bildes jedoch bis zu einem gewissen Grad über den Parameterwidthsteuern.Bei der Einstellung
falsewird entsprechend Ihren Parameternwidthundheightein Bild vom oberen Rand der Webseite aus zugeschnitten.omit_backgroundboolean(Standard:false)Legt fest, ob ein transparenter Hintergrund in HTML-Seiten beibehalten wird. Dies ist nützlich, wenn Sie in HTML eine Grafik erstellen, die Sie beispielsweise über ein Video legen möchten.
Der Standardwert
falsefüllt transparente Bereiche mit einem weißen Hintergrund, damit sie leichter lesbar und druckbar sind.Dieser Parameter wird nur verwendet, wenn
formatnichtpdfist.widthstring | number(Standard:1024)Die verwendete Bildschirmbreite in Pixeln. Ändern Sie diesen Wert, um die Abmessungen des resultierenden Bildes anzupassen.
heightstring | numberDie verwendete Bildschirmhöhe in Pixeln. Standardmäßig entspricht sie der Länge der Webseite in Pixeln, wenn
fullpageauftruegesetzt ist. Wennfullpageauffalsegesetzt ist, wird der Höhenparameter wirksam und verwendet standardmäßig den Wert768.delaystring | number(Standard:0)Die Verzögerung in Millisekunden, damit die Seite einschließlich ihres gesamten JavaScripts gerendert werden kann, bevor der Screenshot erstellt wird.
headersRecord<string, string>Ein Objekt mit optionalen Headern, die zusammen mit der ursprünglichen Anfrage an die Website übermittelt werden. Mit diesem Parameter können Sie beispielsweise ein Autorisierungs-Token zusammen mit der Anfrage übermitteln.
wait_untildomcontentloaded | load | networkidle | commit(Standard:"networkidle")Das Ereignis, auf das vor dem Erstellen des Screenshots gewartet werden soll. Wird zum Laden von JavaScript und Bildern verwendet.
Weitere Informationen finden Sie in der Dokumentation von Playwright.
Demos
Verwandte Blogbeiträge
- Introducing new Robots & features for file handling (English)
- Enhanced /html/convert Robot: new screenshot features (English)
- Enhanced PNG optimization with Pngquant integration (English)
- New pricing model for future Transloadit customers (English)
- Introducing the /dropbox/store Robot for easy exports (English)
- Expanding to Singapore for better Asia-Pacific service (English)
- Let's Build: video from album art with Transloadit (English)
- Easy instant website screenshots via Transloadit CDN (English)