Einfache, sofortige Website-Screenshots über das Transloadit CDN

Joseph Grabski

Content-Leiter · Rochester, Vereinigtes Königreich · Bio anzeigen

In unserem heutigen Blogbeitrag werfen wir einen kurzen Blick auf unser Transloadit CDN und den Robot /html/convert. Wir verwenden einen Assembly Variable-Ausdruck, um eine URL zu decodieren, die im Anfragepfad übergeben wird, und liefern den Screenshot anschließend über das CDN aus.

Wir erstellen ein kleines Template, um einen Screenshot einer Website aufzunehmen, der anschließend dynamisch verändert und den Nutzern innerhalb von Sekunden präsentiert werden kann. Legen wir los!

Unser Template

{
  "steps": {
    "screenshot_page": {
      "robot": "/html/convert",
      "format": "png",
      "fullpage": false,
      "delay": 100,
      "url": "${decodeURIComponent(fields.input)}"
    },
    "served": {
      "use": "screenshot_page",
      "robot": "/file/serve"
    }
  }
}

Mehr brauchen wir in unserem Template nicht, um eine Website in der Vorschau anzuzeigen. Unser erster Step screenshot_page nimmt einen Screenshot jeder URL auf, die wir ihm übergeben.

Der Ausdruck decodeURIComponent(fields.input) decodiert die URL, die im Anfragepfad übergeben wird; es handelt sich um einen Assembly Variable-Ausdruck und nicht um einen eigenen Robot /script/run. Im Kern verwandeln wir https%3A%2F%2Ftransloadit.com%2Fpricing%2F in https://transloadit.com/pricing/.

Als Nächstes nutzen wir den Robot /file/serve, um die Website-Vorschau in unser CDN hochzuladen, sodass das Ergebnis im Handumdrehen weltweit abrufbar ist.

Demo

Website-URL

Screenshot aufnehmen

Vorschau wird geladen…

https://my-app.tlcdn.com/webshot/https%3A%2F%2Ftransloadit.com%2Fpricing%2F⁠

Geben Sie eine öffentliche HTTP- oder HTTPS-URL ein und senden Sie das Formular ab, um einen Screenshot anzufordern. Websites, die eine Authentifizierung erfordern oder automatisierte Browser blockieren, liefern möglicherweise keine brauchbare Vorschau. Die Ergebnisse werden zwischengespeichert. Wenn die Erzeugung einer URL beim ersten Versuch also einige Sekunden dauert, kann der zweite Versuch aus dem Cache bedient werden. Die tatsächliche Latenz hängt von der Zielseite, dem Netzwerk und dem Cache-Zustand ab.

Das war es auch schon für unseren kurzen Blogbeitrag heute! Ich hoffe, der kurze Einblick in die Nutzung des Transloadit CDN hat Ihnen gefallen. Experimentieren Sie gern mit dem Template und ergänzen Sie eigene Parameter.