ChartQuery

Webseite screenshotten

Erstellen Sie einen Vollseiten- oder Viewport-Screenshot einer beliebigen URL als PNG- oder JPEG-Datei mit der CaptureKit API — kein eigener Headless-Browser erforderlich.

Übersicht

Dieses Playbook zeigt, wie Sie einen Screenshot einer beliebigen öffentlichen URL erstellen und auf der Festplatte speichern. Ein häufiger Anwendungsfall ist visuelle Regressionstests oder das Generieren von OG-Bild-Thumbnails für einen Link-Preview-Dienst.

Voraussetzungen

  • Einen CaptureKit-API-Schlüssel — erhalten Sie einen auf app.capturekit.dev
  • Installieren Sie die Abhängigkeiten für Ihre Sprache:
pip install requests

Keine zusätzlichen Abhängigkeiten — verwendet die native fetch-API (Node 18+).

curl-Erweiterung aktiviert (standardmäßig).

Keine zusätzlichen Abhängigkeiten — verwendet net/http (Go 1.18+).

Keine zusätzlichen Abhängigkeiten — verwendet java.net.http (Java 11+).

Keine zusätzlichen Abhängigkeiten — verwendet System.Net.Http (.NET 6+).

# Cargo.toml
[dependencies]
reqwest = { version = "0.12", features = ["json"] }
tokio = { version = "1", features = ["full"] }
serde_json = "1"

Schritte

Screenshot anfordern

Rufen Sie GET /v1/capture mit dem Parameter url auf. Weitere Optionen steuern den Viewport, das Format und die Vollseiten-Erfassung.

import requests

API_KEY = "YOUR_API_KEY"

response = requests.get(
    "https://api.capturekit.dev/v1/capture",
    headers={"x-api-key": API_KEY},
    params={
        "url":       "https://stripe.com",
        "format":    "png",
        "full_page": "true",
        "width":     "1440",
        "height":    "900",
    },
)
data = response.json()
print(data)
const API_KEY = "YOUR_API_KEY";

const params = new URLSearchParams({
  url:       "https://stripe.com",
  format:    "png",
  full_page: "true",
  width:     "1440",
  height:    "900",
});

const response = await fetch(`https://api.capturekit.dev/v1/capture?${params}`, {
  headers: { "x-api-key": API_KEY },
});
const data = await response.json();
console.log(data);
<?php
$apiKey = "YOUR_API_KEY";
$params = http_build_query([
    "url"       => "https://stripe.com",
    "format"    => "png",
    "full_page" => "true",
    "width"     => "1440",
    "height"    => "900",
]);

$ch = curl_init("https://api.capturekit.dev/v1/capture?{$params}");
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_HTTPHEADER, ["x-api-key: {$apiKey}"]);
$data = json_decode(curl_exec($ch), true);
curl_close($ch);
print_r($data);
package main

import (
    "encoding/json"
    "fmt"
    "io"
    "net/http"
    "net/url"
)

func main() {
    params := url.Values{
        "url": {"https://stripe.com"}, "format": {"png"},
        "full_page": {"true"}, "width": {"1440"}, "height": {"900"},
    }
    req, _ := http.NewRequest("GET", "https://api.capturekit.dev/v1/capture?"+params.Encode(), nil)
    req.Header.Set("x-api-key", "YOUR_API_KEY")

    resp, _ := http.DefaultClient.Do(req)
    defer resp.Body.Close()
    body, _ := io.ReadAll(resp.Body)

    var data map[string]any
    json.Unmarshal(body, &data)
    fmt.Println(data)
}
import java.net.URI;
import java.net.URLEncoder;
import java.net.http.*;
import java.nio.charset.StandardCharsets;

var apiKey = "YOUR_API_KEY";
var target = URLEncoder.encode("https://stripe.com", StandardCharsets.UTF_8);
var url    = "https://api.capturekit.dev/v1/capture?url=" + target + "&format=png&full_page=true&width=1440&height=900";

var client  = HttpClient.newHttpClient();
var request = HttpRequest.newBuilder().uri(URI.create(url))
    .header("x-api-key", apiKey).GET().build();

var response = client.send(request, HttpResponse.BodyHandlers.ofString());
System.out.println(response.body());
using System.Net.Http;

using var client = new HttpClient();
client.DefaultRequestHeaders.Add("x-api-key", "YOUR_API_KEY");

var target = Uri.EscapeDataString("https://stripe.com");
var body   = await client.GetStringAsync(
    $"https://api.capturekit.dev/v1/capture?url={target}&format=png&full_page=true&width=1440&height=900");
Console.WriteLine(body);
#[tokio::main]
async fn main() -> Result<(), reqwest::Error> {
    let data = reqwest::Client::new()
        .get("https://api.capturekit.dev/v1/capture")
        .header("x-api-key", "YOUR_API_KEY")
        .query(&[("url", "https://stripe.com"), ("format", "png"), ("full_page", "true"), ("width", "1440"), ("height", "900")])
        .send().await?.json::<serde_json::Value>().await?;

    println!("{:#?}", data);
    Ok(())
}

Bild-URL aus der Antwort auslesen

Die API gibt eine screenshot_url mit dem gehosteten Bild zurück — oder ein base64-kodiertes image-Feld, wenn Sie response_type=base64 setzen.

screenshot_url = data.get("screenshot_url")
print(f"Screenshot bereit: {screenshot_url}")
const { screenshot_url } = data;
console.log(`Screenshot bereit: ${screenshot_url}`);
$screenshotUrl = $data["screenshot_url"] ?? "";
echo "Screenshot bereit: {$screenshotUrl}\n";
screenshotURL := data["screenshot_url"].(string)
fmt.Println("Screenshot bereit:", screenshotURL)
import org.json.*;

var screenshotUrl = new JSONObject(response.body()).getString("screenshot_url");
System.out.println("Screenshot bereit: " + screenshotUrl);
using System.Text.Json;

var screenshotUrl = JsonDocument.Parse(body).RootElement.GetProperty("screenshot_url").GetString();
Console.WriteLine($"Screenshot bereit: {screenshotUrl}");
let screenshot_url = data["screenshot_url"].as_str().unwrap_or("");
println!("Screenshot bereit: {}", screenshot_url);

Bild herunterladen und speichern

Rufen Sie die Bild-Bytes von der URL ab und schreiben Sie sie auf die Festplatte.

filename = "screenshot.png"
with requests.get(screenshot_url, stream=True) as r:
    r.raise_for_status()
    with open(filename, "wb") as f:
        for chunk in r.iter_content(chunk_size=8192):
            f.write(chunk)

print(f"Gespeichert als {filename}")
import { writeFileSync } from "fs";

const imgResponse = await fetch(screenshotUrl);
const buffer      = Buffer.from(await imgResponse.arrayBuffer());
writeFileSync("screenshot.png", buffer);
console.log("Gespeichert als screenshot.png");
$fp = fopen("screenshot.png", "wb");
$ch = curl_init($screenshotUrl);
curl_setopt($ch, CURLOPT_FILE, $fp);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
curl_exec($ch);
curl_close($ch);
fclose($fp);
echo "Gespeichert als screenshot.png\n";
import "os"

resp, _ := http.Get(screenshotURL)
defer resp.Body.Close()
file, _ := os.Create("screenshot.png")
defer file.Close()
io.Copy(file, resp.Body)
fmt.Println("Gespeichert als screenshot.png")
import java.net.URL;
import java.nio.file.*;

Files.copy(new URL(screenshotUrl).openStream(), Path.of("screenshot.png"), StandardCopyOption.REPLACE_EXISTING);
System.out.println("Gespeichert als screenshot.png");
var imageBytes = await new HttpClient().GetByteArrayAsync(screenshotUrl);
File.WriteAllBytes("screenshot.png", imageBytes);
Console.WriteLine("Gespeichert als screenshot.png");
use std::{fs::File, io::Write};

let bytes = reqwest::get(screenshot_url).await?.bytes().await?;
let mut file = File::create("screenshot.png").unwrap();
file.write_all(&bytes).unwrap();
println!("Gespeichert als screenshot.png");

Verwenden Sie full_page=false, um nur den Above-the-Fold-Viewport zu erfassen — ideal für Social-Media-Vorschau-Thumbnails, bei denen ein 630×1200 px Zuschnitt mit fester Höhe benötigt wird.

Auf dieser Seite