📸

Screenshot API

URL & Doğrudan HTML Ekran Görüntüsü Servisi

● v1.1.0 🔒 Auth Aktif GitHub ↗

⚡ URL veya Doğrudan HTML'den Çekim

Web & HTML Ekran Görüntülerini Anında Alın

Canlı bir web sitesinin veya doğrudan POST ettiğiniz ham HTML kodunun ekran görüntüsünü PNG, JPEG veya WEBP formatında elde edin.

🧪 Canlı Test Alanı (Playground)

Hedef URL *

Ham HTML Kodu (CSS ve stiller dahil) *

Element CSS Seçicisi (Opsiyonel)

Format

Tüm Sayfa (Full Page)

API Key Header (Zorunlu)

✓ Görüntü Başarıyla Alındı İndir 📥

🔐 Kimlik Doğrulama (Auth)

Sunucuda API_KEY ortam değişkeni tanımlandığında isteklerinizde aşağıdaki başlıklardan birini göndermeniz gerekmektedir:

Header Yapısı

X-API-Key: YOUR_SECRET_API_KEY
# veya
Authorization: Bearer YOUR_SECRET_API_KEY

🔌 API Endpoint'leri

POST /screenshot

URL veya JSON HTML

POST /html

Doğrudan HTML Post

GET /up (veya /health)

Health Status

GET /

Dokümantasyon

📋 İstek Parametre Referansı

İsteklerinizi application/json, application/x-www-form-urlencoded veya text/html olarak gönderebilirsiniz.

Parametre	Tip	Zorunlu?	Varsayılan	Açıklama
`url`	string	Opsiyonel*	-	Görüntülenecek web sitesi adresi (örn: `https://tunahancaliskan.com`).
`html`	string	Opsiyonel*	-	Doğrudan render edilecek ham HTML dizesi (CSS ve stilleri içerebilir).
`element`	string	Hayır	`null`	Spesifik bir öğeyi yakalamak için CSS seçicisi (örn: `.hero`, `#card`).
`fullPage`	boolean	Hayır	`false`	Sayfanın tamamını (kaydırılabilir tüm boyutta) yakalamak için `true` verin.
`format`	string	Hayır	`png`	Görsel formatı: `png`, `jpeg`, veya `webp`.
`quality`	number	Hayır	-	JPEG ve WEBP formatları için kalite değeri (1 - 100 arası).
`width` / `height`	number	Hayır	`1920` / `1080`	Tarayıcı ekran çözünürlüğü boyutları (piksel).
`delay`	number	Hayır	`0`	Çekim öncesi bekleme süresi (milisaniye cinsinden, maks 10000ms).
`waitForSelector`	string	Hayır	-	Çekimden önce DOM'da belirmesi beklenecek element seçicisi.

* url veya html parametrelerinden en az birinin belirtilmesi zorunludur.

💻 Entegrasyon Kod Örnekleri

Terminal / cURL (Ham HTML Gönderimi)

# 1. Yöntem: JSON İçinde HTML Gönderimi
curl -X POST http://localhost:3000/screenshot \
  -H "Content-Type: application/json" \
  -H "X-API-Key: YOUR_API_KEY" \
  -d '{
    "html": "<h1 style=\"color: #6366f1;\">Merhaba Dünya</h1>",
    "format": "png"
  }' \
  --output html_screenshot.png

# 2. Yöntem: Doğrudan text/html Olarak Gönderim
curl -X POST http://localhost:3000/html \
  -H "Content-Type: text/html" \
  -H "X-API-Key: YOUR_API_KEY" \
  -d '<div style="background: #111; color: #fff; padding: 40px;"><h1>HTML Screenshot</h1></div>' \
  --output direct_html.png

Terminal / cURL (URL Gönderimi)

curl -X POST http://localhost:3000/screenshot \
  -H "Content-Type: application/json" \
  -H "X-API-Key: YOUR_API_KEY" \
  -d '{
    "url": "https://tunahancaliskan.com",
    "element": "body",
    "format": "webp",
    "fullPage": false
  }' \
  --output screenshot.webp

JavaScript (HTML Render & Fetch)

const htmlContent = `
  <div style="background: linear-gradient(135deg, #6366f1, #06b6d4); color: white; padding: 50px; border-radius: 12px; font-family: sans-serif;">
    <h1>Dinamik Kart</h1>
    <p>Bu alan JavaScript tarafından gönderilen HTML'den üretildi.</p>
  </div>
`;

const response = await fetch('http://localhost:3000/screenshot', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'X-API-Key': 'YOUR_API_KEY'
  },
  body: JSON.stringify({
    html: htmlContent,
    format: 'png'
  })
});

const blob = await response.blob();
const imageUrl = URL.createObjectURL(blob);

Python (HTML Screenshot)

import requests

url = "http://localhost:3000/screenshot"
headers = {
    "Content-Type": "application/json",
    "X-API-Key": "YOUR_API_KEY"
}
payload = {
    "html": "<h1 style='color:purple;'>Python HTML Render</h1>",
    "format": "webp"
}

response = requests.post(url, json=payload, headers=headers)
if response.status_code == 200:
    with open("html_output.webp", "wb") as f:
        f.write(response.content)

PHP (HTML Screenshot)

<?php
$ch = curl_init('http://localhost:3000/screenshot');
$data = json_encode([
    'html' => '<h1 style="color: #6366f1;">PHP ile HTML Ekran Görüntüsü</h1>',
    'format' => 'png'
]);

curl_setopt($ch, CURLOPT_CUSTOMREQUEST, 'POST');
curl_setopt($ch, CURLOPT_POSTFIELDS, $data);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_HTTPHEADER, [
    'Content-Type: application/json',
    'X-API-Key: YOUR_API_KEY'
]);

$result = curl_exec($ch);
file_put_contents('html_screenshot.png', $result);
curl_close($ch);
?>

Node.js (Axios)

const axios = require('axios');
const fs = require('fs');

async function captureHtml() {
  const response = await axios.post('http://localhost:3000/screenshot', {
    html: '<h1>Node.js HTML Render</h1>',
    format: 'png'
  }, {
    headers: { 'X-API-Key': 'YOUR_API_KEY' },
    responseType: 'arraybuffer'
  });

  fs.writeFileSync('output.png', response.data);
}

captureHtml();