Node.js ile Ekran Görüntüsü, PDF ve Görsel Fark Alımını Kolaylaştırın

Node.js projelerinde kullanıcı arayüzlerini görüntülemek veya PDF olarak kaydetmek istediğinizde, yerel çözümler karmaşık ve bakımı zor bir hale gelebilir. Yerel Chromium kurulumu, farklı makinelerdeki font farklılıkları, sayfaların donması ve cookie banner'larının kapanması gibi sorunlarla uğraşmak zorunda kalabilirsiniz. Üstelik mobil simülasyonu, toplu işlemler veya görsel fark analizi gerektiğinde süreciniz daha da karmaşıklaşır.

Neyse ki, bulut tabanlı bir ekran görüntüsü API'si olan SnapshotFlow, bu sorunların üstesinden gelmenize yardımcı oluyor. Bu rehberde, Node.js uygulamalarında SnapshotFlow'un TypeScript SDK'sını kullanarak nasıl ekran görüntüsü alacağınızı, PDF oluşturacağınızı ve görsel farkları karşılaştıracağınızı adım adım öğreneceksiniz. Bu sayede, tarayıcı altyapısını yönetmek yerine uygulama mantığına odaklanabilirsiniz.

SnapshotFlow SDK'sını Kurun ve Ayarlayın

Öncelikle, projenize SnapshotFlow'un npm paketini ekleyin:

npm install snapshotflow

Bu SDK, Node.js 18 veya daha yeni sürümlerini gerektirir. Kurulumdan sonra, SnapshotFlow kontrol panelinden bir API anahtarı oluşturun ve bunu ortam değişkeninize kaydedin:

export SNAPSHOTFLOW_API_KEY="oluşturduğunuz_api_anahtarı"

SDK, HTTP API'nin TypeScript uyumlu bir sarmalayıcısıdır. Tüm işlemler bulut üzerinde gerçekleştiği için, yerel olarak Puppeteer, Playwright, Chromium binary'leri veya tarayıcı havuzları yönetmek zorunda kalmazsınız. Bu sayede, uygulama sunucunuzun kaynakları daha verimli kullanılır ve bakım yükü önemli ölçüde azalır.

Temel Bir Ekran Görüntüsü Nasıl Alınır?

İşe basit bir örnekle başlayalım. Aşağıdaki kod parçası, belirtilen bir URL'den tam sayfa ekran görüntüsü alır ve yerel diske kaydeder:

import { SnapshotFlow } from "snapshotflow";

const client = new SnapshotFlow({
  apiKey: process.env.SNAPSHOTFLOW_API_KEY!,
});

const shot = await client.take({
  url: "
  fullPage: true,
  width: 1440,
});

await shot.save("ornek-site.png");

take() metodu, ScreenshotResult türünde bir nesne döndürür. Bu nesne aşağıdaki özellikleri içerir:

• buffer: Bellekteki görüntü verisi.
• contentType: Dönüştürülen görüntünün MIME türü.
• cached: Önbelleğe alınmış bir yanıt olup olmadığını gösterir.
• etag: Kaynak versiyonunu tanımlayan bir kimlik.
• save(path): Belirtilen yola görüntüyü kaydeder.
• toBase64(): Görüntüyü Base64 formatına çevirir.
• blob(): Görüntüyü Blob nesnesi olarak döndürür.

Bu özellikler sayesinde, görüntüyü doğrudan S3'e yükleyebilir, API yanıtından döndürebilir veya işlem sonrası dizinlerde saklayabilirsiniz.

TypeScript Dostu Seçeneklerle Daha Detaylı Kontrol

HTTP API'si snake_case parametreler kullanırken, SDK TypeScript projelerinde camelCase seçenekleri destekler. Bu sayede kodunuz daha okunabilir ve anlaşılır hale gelir. Örneğin, aşağıdaki gibi bir yapılandırma kullanabilirsiniz:

const shot = await client.take({
  url: "
  width: 1440,
  height: 900,
  deviceScaleFactor: 2, // Retina çözünürlük
  fullPage: true,      // Sayfanın tamamını yakala
  blockAds: true,      // Reklamları engelle
  blockCookieBanners: true, // Cookie banner'larını gizle
  waitUntil: "networkidle2", // Sayfa ağ istekleri durana kadar bekle
  delay: 1000,         // Sayfanın yüklenmesinden sonra 1 saniye bekle
});

await shot.save("github.png");

Bu yapılandırma ile yüksek çözünürlüklü, tam sayfa bir ekran görüntüsü alınırken, reklamlar ve cookie banner'ları otomatik olarak engellenir. Ayrıca sayfanın yüklenmesini tamamlaması için gereken süre kadar bekleme süresi ayarlanabilir.

PDF Oluşturma ve Görsel Fark Analizi

SnapshotFlow'un sunduğu özellikler sadece ekran görüntüsü almakla sınırlı değil. Aynı API ile PDF belgeleri oluşturabilir ve görsel farkları karşılaştırabilirsiniz. Örneğin, bir web sayfasının farklı versiyonlarını karşılaştırmak için görsel fark analizi kullanabilirsiniz:

const beforeShot = await client.take({ url: " });
const afterShot = await client.take({ url: " });

const diff = await client.compare({
  base: beforeShot,
  compare: afterShot,
  threshold: 0.05, // Yüzde 5'ten fazla fark varsa dikkate al
});

if (diff.hasChanges) {
  await diff.save("degisiklikler.png");
}

Bu şekilde, görsel değişiklikleri otomatik olarak tespit edebilir ve gerektiğinde geliştirici ekiplerine bildirim gönderebilirsiniz.

Sonuç: Yerel Yükten Kurtulun, Üretkenliğe Odaklanın

Node.js projelerinde ekran görüntüsü almak, PDF oluşturmak veya görsel fark analizi yapmak artık karmaşık bir süreç değil. SnapshotFlow gibi bulut tabanlı hizmetler sayesinde, yerel tarayıcı altyapısını yönetmek zorunda kalmadan bu işlemleri hızlı ve güvenilir bir şekilde gerçekleştirebilirsiniz. Bu sayede, uygulama kodunuzu daha temiz tutabilir, bakım yükünü azaltabilir ve ölçeklenebilir çözümler geliştirebilirsiniz.

Daha fazla bilgi ve API belgelerine ulaşmak için SnapshotFlow'un resmi dokümantasyonunu inceleyebilirsiniz. Gelecekte, bu tür hizmetlerin Node.js ekosistemindeki rolünün daha da artması ve geliştiricilere sunduğu esnekliklerin genişlemesi bekleniyor.