Nur ein Element der Webseite screenshotten
Diese Funktion ruft eine Internetadresse auf und liefert nicht die ganze Seite, sondern ausschließlich den Bereich, den ein CSS-Selektor bezeichnet – etwa eine Preistabelle, ein Banner oder eine Fehlermeldung. So entsteht ein sauber zugeschnittenes Bild, ohne Nachbearbeitung in einem Bildbearbeitungsprogramm.
Online ausführen
Führen Sie dies mit Ihrem Konto auf unseren Servern aus. Kostenlose Tools laufen in Ihrem Browser; dieses wird zum oben genannten Preis von Ihrem KIT-Guthaben abgebucht.
Wie der Ausschnitt bestimmt wird
Sie geben neben der Internetadresse einen CSS-Selektor an, etwa die Klasse eines Preiskastens oder die ID einer Fehlermeldung. Die Funktion sucht dieses Element auf der geladenen Seite und liefert ausschließlich seinen Bereich als Bild zurück, in seiner tatsächlichen Größe, ohne umliegende Navigation oder Werbung. Enthält das Element selbst Bilder oder Text, erscheinen diese unverändert in der Aufnahme, so wie sie beim Laden der Seite dargestellt werden.
Wann ein Ausschnitt sinnvoller ist als die ganze Seite
Für einen Bug-Report reicht oft ein einzelnes fehlerhaftes Element, nicht die komplette Seite mit allem Drumherum – ein Ausschnitt macht sofort klar, worum es geht, ohne dass jemand in einem großen Bild danach suchen muss. Auch ein einzelnes Widget, etwa ein Bewertungsbaustein oder eine Preisbox, lässt sich so isoliert weiterverwenden, etwa in einer Präsentation oder einem internen Bericht, ohne störenden Rand.
Wenn der Selektor nicht gefunden wird
Existiert das angegebene Element auf der geladenen Seite nicht, meldet die Funktion einen Fehler statt eines leeren Bildes. Das kommt vor, wenn sich die Struktur einer fremden Seite seit der letzten Prüfung geändert hat, etwa nach einem Redesign; ein kurzer Blick in den Quelltext der Seite klärt in der Regel, welcher Selektor aktuell zutrifft, und die Anfrage lässt sich mit dem korrigierten Wert wiederholen.
Preis pro Anfrage
$0.040 pro Anfrage zuzüglich $0.001 pro URL, unabhängig davon, wie groß oder klein der ausgewählte Bereich ausfällt. Ein winziges Symbol kostet also genauso viel wie eine ganze Preistabelle, da die gesamte Seite ohnehin geladen werden muss, damit das Element im richtigen Layout erscheint. Ein Konto oder Abonnement ist dafür nicht erforderlich, Sie zahlen ausschließlich für die tatsächlich ausgeführte Aufnahme, unabhängig davon, wie oft Sie dasselbe Element im Laufe der Zeit erneut abrufen.
Anwendungsfälle
Bug-Report für den Webentwickler
Jonas Weber schickt seinem Entwickler nur den Ausschnitt der defekten Preisbox statt eines Screenshots der gesamten Seite, damit das Problem sofort erkennbar ist.
Bewertungsbaustein für eine Präsentation
Weber Metallbau GmbH übernimmt den Ausschnitt mit den aktuellen Kundenbewertungen von der eigenen Seite in eine Verkaufspräsentation.
Cookie-Banner eines Wettbewerbers dokumentieren
Eine Marketingabteilung hält den Ausschnitt eines auffälligen Cookie-Banners auf einer fremden Seite fest, um ihn im eigenen Team zu besprechen.
Häufige Fragen
Was, wenn der angegebene Selektor nicht existiert?
Die Anfrage liefert eine Fehlermeldung statt eines Bildes; prüfen Sie in diesem Fall den Quelltext der Zielseite auf den aktuellen Klassen- oder ID-Namen.
Kann ich mehrere Elemente in einer Aufnahme kombinieren?
Nein, jede Anfrage bezieht sich auf genau einen Selektor und liefert genau einen Ausschnitt.
Woher weiß ich, welchen Selektor ich angeben muss?
Über die Entwicklertools des eigenen Browsers, mit Rechtsklick auf das gewünschte Element und der Option zum Element untersuchen.
Was kostet ein Element-Screenshot?
$0.040 pro Anfrage plus $0.001 pro URL, wie bei einem vollständigen Screenshot.
Wird die Seite drumherum trotzdem geladen?
Ja, die gesamte Seite wird geladen, damit das Element in seinem echten Layout erscheint; im Ergebnis sehen Sie aber nur den ausgewählten Ausschnitt.
Brauche ich dafür Programmierkenntnisse?
Grundkenntnisse in CSS-Selektoren helfen, sind aber keine Voraussetzung – die Entwicklertools des Browsers zeigen den passenden Selektor meist direkt an.
Für Entwickler — API-Zugang
Alles auf dieser Seite ist auch per API verfügbar. Dieser Abschnitt richtet sich an Teams, die es in ihre eigenen Systeme einbinden möchten; alle anderen nutzen einfach das Tool oben.
Endpunkt
Authentifizierung per Bearer-Token. Ein einziger POST stellt die Aufgabe in die Warteschlange; das Ergebnis erhalten Sie per Webhook oder über einen signierten Link.
Aufruf aus Ihrem Stack
curl -X POST https://api.kit.forhosting.com/web/screenshot-element \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"url":"https://ejemplo.com"}'const res = await fetch("https://api.kit.forhosting.com/web/screenshot-element", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"url": "https://ejemplo.com"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/web/screenshot-element",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"url": "https://ejemplo.com"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/web/screenshot-element", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"url":"https://ejemplo.com"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"url":"https://ejemplo.com"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/web/screenshot-element", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Beispiel-Anfrage
{
"url": "https://ejemplo.com"
}Beispiel-Antwort
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "web.screenshot_element",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}Die API arbeitet asynchron: Sie erhalten sofort eine task_id. Polling ist mit 1 Anfrage pro Sekunde erlaubt.
Preis
Der Preis steht auf der Seite – keine Tokens, keine Credits. Fehlgeschlagene Aufgaben werden nicht berechnet.
Limits
timeout_sec | 30 |
max_crawl_pages | 25 |
Fehler
| HTTP | Code | Bedeutung |
|---|---|---|
401 | unauthorized | Der API-Schlüssel fehlt oder ist ungültig – prüfen Sie den Authorization-Header (Bearer). |
402 | insufficient_balance | Ihr Guthaben reicht für diese Aufgabe nicht aus – Aufladungen verfallen nicht. |
404 | unknown_type | Unbekannter Aufgabentyp – prüfen Sie das Feld „type“ gegen den Katalog. |
429 | rate_limited | Zu viele Anfragen – warten Sie kurz; Polling ist mit 1 Anfrage pro Sekunde erlaubt. |
422 | task_failed | Die Aufgabe ist fehlgeschlagen und wird nicht berechnet. |