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

JavaScript ile Web Ekranını AlJavaScript 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.

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@3.4.8/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@3.4.8/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, bir PNG formatında 400px genişliğinde ve 400px yüksekliğinde bir ekran görüntüsüne sahip olmak ve ekran görüntüsünün alınmasından önce 10 saniye beklemek istemeniz durumunda, aşağıdakileri yapmalısınız.

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.4.8/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@3.4.8/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@3.4.8/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@3.4.8/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@3.4.8/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@3.4.8/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@3.4.8/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@3.4.8/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@3.4.8/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@3.4.8/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.

  • ConvertURL([url to capture], [options]) - bir URL'yi, varsayılan olarak JPG ekran görüntüsünü dönüştürür. İçeren JSON sözlüğü parametreler İsteğe bağlı.
  • ConvertHTML([html to convert], [options]) - HTML'yi dönüştürür, varsayılan olarak into bir JPG görüntüsü. İçeren JSON sözlüğü parametreler İsteğe bağlı.
  • ConvertPage([options]) - kullanıcının geçerli sayfasını yakalar, varsayılan olarak into bir JPG görüntüsü. İçeren JSON sözlüğü parametreler İsteğe bağlı.

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

  • UseSSL() - zorla yapmak SSL kullanarak istekler.
  • Encrypt() - Bir yakalamayı otomatik olarak şifreli bir anahtarla şifreleyin.
  • AddPostVariable(name, value) - Bir HTTP Post parametresini ve isteğe bağlı olarak değeri tanımlar, bu yönteme birden fazla parametre eklemek için birden fazla kez çağrılabilir. Bu yöntemi kullanmak GrabzIt’ı zorlayacaktır. HTTP gönderisi gerçekleştir.
  • AddTemplateVariable(name, value) - tanımlar özel şablon parametre ve değer, bu yöntem birden çok parametre eklemek için birden çok kez çağrılabilir.
  • AddTo([element | element id]) - bir yakalama ekler into belirtilen eleman.
  • Create() - yakalamayı ekler into gövde etiketinin başlangıcı ya da HTML belgesinin kök düğümü yoksa.
  • CreateInvisible() - yakalama oluşturulur, ancak web sayfasında gösterilmez.
  • DataURI([callback function], [decrypt]) - geri çağırma işlevinin tek parametresinde yakalamanın base64 veri URI'sini döndürür. Şifre çözme parametresi true olursa, şifrelenmiş herhangi bir kaydı otomatik olarak çözer.

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