Web Yakalama ve Dönüştürme Araçları

JavaScript ile Web Ekranını Al

JavaScript API'sı
The teşhis paneli kodunuzu hata ayıklamak yardımcı olabilir!

GrabzIt JavaScript API'sini kullanmak, görüntü, DOCX veya PDF ekran görüntülerini koymanın en kolay yoludur animasyonlu GIF dönüşümleri için video ve dahası into web siteniz. Sadece gerektiren GrabzIt JavaScript kütüphanesi, bir JavaScript kodu satırı ve GrabzIt sihri!

Varsayılan olarak bir yakalama oluşturulduktan sonra, paketiniz tarafından belirlenen süre boyunca sunucularımızda önbelleğe alınmaya devam eder. Ardından, GrabzIt'ın JavaScript API'sine bir çağrı yapılırsa, bunun yerine daha önce önbelleğe alınmış bir ekran görüntüsüyle aynı parametreler kullanılarak yapılırsa, ekran görüntüsü ödeneğinin gereksiz yere kullanılmasını önlemek için. Bu davranış, kullanılarak devre dışı bırakılabilir. önbellek parametresi.

Başlamak

Javascript API'sine başlamak için şu adımları izleyin:

  1. Özgür olsun uygulama anahtarı.
  2. Ücretsiz indirin JavaScript Kütüphanesi ve denemek demo uygulaması.
  3. Aşağıdaki genel bakışı okuyarak Grabzt'in JavaScript API'sinin nasıl çalıştığı hakkında temel bilgileri öğrenin.

Diğer kişilerin sadece JavaScript kodunuzu kopyalamasını ve tüm GrabzIt hesap kaynaklarınızı çalmasını önlemek için, etki alanlarını yetkilendir Uygulama Anahtarınızı kullanabilirsiniz.

  • Şu anda yetkili alan adınız olmadığı için bu JavaScript API'si sizin için çalışmayacaktır! Lütfen etki alanınızı ekleyin!

En Basit Örnek

Başlamak için GrabzIt JavaScript kütüphanesi ve dahil grabzit.min.js Web sayfasındaki bir kütüphane, yakalamanın görünmesini veya CDN’nin CDN sürümüne bir referans içermesini istediğinizde grabzit.min.js aşağıda gösterildiği gibi kütüphane. Ardından, web sayfanızın gövde etiketine bir ekran görüntüsü eklemek için aşağıdaki kodu ekleyin. Değiştirmeniz gerekecek APPLICATION KEY seninki ile Uygulama anahtarı ve değiştir https://www.tesla.com web sitesi ile ekran görüntüsünü almak istiyorum.

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertURL("https://www.tesla.com").Create();
</script>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertHTML("<html><body><h1>Hello World!</h1></body></html>").Create();
</script>

Ardından kısa bir süre bekleyin; görüntü, web sayfasını yeniden yüklemenize gerek kalmadan sayfanın en üstünde otomatik olarak görünecektir. Bu görüntü tarayıcıda oluşturulmuş olsa bile, yine de kullanabilirsiniz. bu teknikler save kendi sunucunuzda yakalar Eğer istersen.

GrabzIt'i ES6 modülü olarak kullanmak istiyorsanız, bunu kullanabilirsiniz. teknik, GrabzIt’ın JavaScript’e nasıl dahil edildiğinin haricinde, burada ayrıntılarıyla aynı şekilde çalışacaktır.

Ekran görüntülerini özelleştirme

Uygulama Anahtarı ve URL veya HTML parametreleri gerekliyken, diğerlerinin tümü parametreler isteğe bağlıdır. İstediğiniz her parametre için, aşağıdaki biçimde bir JSON sözlüğü olarak değeri ile parametre eklenerek bir parametre eklenir.

Örneğin, 400 piksel genişliğinde ve 400 piksel yüksekliğinde PNG formatında bir ekran görüntüsü almak ve ekran görüntüsü alınmadan önce 10 saniye beklemek istiyorsanız aşağıdakileri yaparsınız.

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertURL("https://www.tesla.com", 
{"width": 400, "height": 400, "format": "png", "delay": 10000}).Create();
</script>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertHTML("<html><body><h1>Hello World!</h1></body></html>",
{"width": 400, "height": 400, "format": "png", "delay": 10000}).Create();
</script>

JavaScript API bir web sayfasının HTML'sine kolay erişebildiğinden, yakalamak için de idealdir. dinamik web sayfası içeriği veya içerik girişin arkasında.

PDF oluşturma ve daha fazlası

PDF, DOCX, CSV, JSON veya Excel Elektronik Tablo gibi başka bir yakalama türü oluşturmak için sadece istenen formatı belirtin ve otomatik olarak oluşturulacaktır. Örneğin, aşağıdaki örneklerde sırasıyla URL'lerden ve HTML'den DOCX ve PDF belgeleri oluşturuyoruz, bunlar otomatik olarak kullanıcı tarayıcısına indiriliyor.

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertURL("https://www.tesla.com", 
{"format": "pdf", "download": 1}).Create();
</script>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertHTML("<html><body><h1>Hello World!</h1></body></html>",
{"format": "pdf", "download": 1}).Create();
</script>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertURL("https://www.tesla.com", 
{"format": "docx", "download": 1}).Create();
</script>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertHTML("<html><body><h1>Hello World!</h1></body></html>",
{"format": "docx", "download": 1}).Create();
</script>

Bunu hatırlamak önemlidir indirme parametresi DOCX, PDF, PNG, JPG veya CSV gibi herhangi bir çekim türünü otomatik olarak indirmek için kullanılabilir.

Ekranlara Ekran Görüntüsü Ekleme

The AddTo Aşağıdaki yöntem, bir görüntünün veya DOM öğesinin kimliğini, görüntüyü veya PDF yakalamayı eklemek için HTML belgesindeki konum olarak kabul eder. Aşağıdaki örnekte ekran görüntüsü ekrana eklenecektir. insertCode div.

Sonunda gerekli olanı geçmek parametreler JSON sözlüğü olarak ConvertURL or ConvertHTML yöntemleri. Aşağıdaki örnekte gecikme, 1000ms ve PNG formatına ayarlanmıştır. Bununla birlikte, başka bir ek seçeneğe gerek duymuyorsanız, bu parametreyi hiç belirtmeniz gerekmez.

<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
</head>
<body>
<div id="insertCode"></div>
<script type="text/javascript">
GrabzIt("Sign in to view your Application Key").ConvertURL("http://www.yahoo.com", {"delay": 1000, "format": "png"}).AddTo("insertCode");
</script>
</body>
</html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
</head>
<body>
<div id="insertCode"></div>
<script type="text/javascript">
GrabzIt("Sign in to view your Application Key").ConvertHTML("<html><body><h1>Hello World!</h1></body></html>", 
{"delay": 1000, "format": "png"}).AddTo("insertCode");
</script>
</body>
</html>

Verileri bir URI'ye Dönüştürme

The DataURI Aşağıdaki yöntem bir geri çağırma işlevini kabul eder, bu işlev daha sonra JavaScript uygulamanızın yakalama üzerinde daha fazla denetime izin vermesi için ekran görüntüsü veya yakalamanın base64 veri URI'sine geçirilir.

<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
</head>
<body>
<div id="datauri" style="width:100%;word-break:break-all"></div>
<script type="text/javascript">
function callback(dataUri)
{
    document.getElementById('datauri').innerHTML = dataUri;
}
GrabzIt("Sign in to view your Application Key").ConvertURL("http://www.yahoo.com").DataURI(callback);
</script>
</body>
</html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
</head>
<body>
<div id="datauri" style="width:100%;word-break:break-all"></div>
<script type="text/javascript">
function callback(dataUri)
{
    document.getElementById('datauri').innerHTML = dataUri;
}
GrabzIt("Sign in to view your Application Key").ConvertHTML("<html><body><h1>Hello World!</h1></body></html>").DataURI(callback);
</script>
</body>
</html>

Kepçe Teknikleri

Başlamak için, dönüştürmek istediğinizi belirtmek için aşağıdaki üç yöntemden birini seçmelisiniz.

Ardından, yakalamanın nasıl oluşturulmasını istediğinizi belirtmek için bu yöntemlerden birini veya birkaçını seçin.

Bu JavaScript kod kütüphanesi tamamen açık kaynak! Kaynak kodunu görüntülemek veya geliştirmek istiyorsanız, onu bulabilirsiniz. GitHub.