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.
Javascript API'sine başlamak için şu adımları izleyin:
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.
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.
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, 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.
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>
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>
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.