Strumenti per acquisire e convertire il Web

Cattura schermate dei siti Web con JavaScriptAPI JavaScript

Lo pannello diagnostico può aiutarti a eseguire il debug del tuo codice!

L'utilizzo dell'API JavaScript GrabzIt è il modo più semplice per inserire schermate di immagini, DOCX o PDF, nonché video per conversioni GIF animate e ancora più into il tuo sito web. Richiede solo il Libreria JavaScript GrabzIt, una riga di codice JavaScript e un po 'di magia GrabzIt!

Per impostazione predefinita, una volta creata, un'acquisizione rimarrà memorizzata nella cache sui nostri server per il tempo determinato dal pacchetto. Quindi, se viene effettuata una chiamata all'API JavaScript di GrabzIt utilizzando gli stessi parametri di uno screenshot precedentemente memorizzato nella cache che verrà invece restituito, per evitare di utilizzare inutilmente la franchigia dello screenshot. Questo comportamento può essere disabilitato usando il parametro cache.

Getting Started

Per iniziare con l'API Javascript, procedere come segue:

  1. Ottieni il tuo libero chiave dell'applicazione.
  2. Scarica il gratuito Libreria JavaScript e prova il app demo.
  3. Scopri le basi su come funziona l'API JavaScript di GrabzIt leggendo la panoramica di seguito.

Per impedire ad altre persone di copiare il tuo codice JavaScript e rubare tutte le risorse del tuo account GrabzIt, devi farlo autorizzare quali domini può usare la chiave dell'applicazione.

L'esempio più semplice

Per iniziare, scarica il Libreria JavaScript GrabzIt e includere il grabzit.min.js libreria nella pagina Web in cui si desidera visualizzare l'acquisizione o includere un riferimento alla versione CDN di grabzit.min.js libreria come mostrato di seguito. Quindi includi il codice seguente per aggiungere uno screenshot al tag body della tua pagina web. Dovrai sostituire il APPLICATION KEY con il tuo Chiave dell'applicazione e sostituisci https://www.tesla.com con il sito Web di cui vuoi fare uno screenshot.

<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>

Quindi attendi qualche istante e l'immagine apparirà automaticamente nella parte superiore della pagina, senza la necessità di ricaricare la pagina web. Anche se questa immagine viene generata nel browser, puoi comunque utilizzarla queste tecniche a save acquisisce sul proprio server se desideri.

Se vuoi usare GrabzIt come modulo ES6 invece puoi usarlo tecnica, a parte il modo in cui GrabzIt è incluso nel tuo JavaScript funzionerà esattamente come descritto qui.

Personalizza i tuoi screenshot

Mentre sono richiesti la chiave dell'applicazione e i parametri URL o HTML, tutti gli altri parametri sono opzionali. Un parametro viene aggiunto aggiungendo il parametro con il suo valore come dizionario JSON nel seguente formato per ogni parametro opzionale richiesto.

Ad esempio, se si desidera avere uno screenshot con una larghezza di 400px e un'altezza di 400px, in un formato PNG e si desidera attendere 10 secondi prima che venga acquisito lo screenshot, si dovrebbe fare quanto segue.

<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>

Poiché l'API JavaScript ha un facile accesso all'HTML di una pagina Web, è anche ideale per l'acquisizione contenuto dinamico della pagina web o contenuto dietro un login.

Creazione di PDF e altro

Per creare un altro tipo di acquisizione come un foglio di calcolo PDF, DOCX, CSV, JSON o Excel, basta specificare il formato desiderato e verrà automaticamente creato. Ad esempio, negli esempi seguenti stiamo creando documenti DOCX e PDF rispettivamente da URL e HTML, che vengono quindi scaricati automaticamente nel browser dell'utente.

<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>

È importante ricordare che questo parametro di download può essere utilizzato per scaricare automaticamente qualsiasi tipo di acquisizione, come DOCX, PDF, PNG, JPG o CSV.

Aggiunta di schermate agli elementi

Lo AddTo il metodo seguente accetta l'id di un elemento o un elemento DOM come posizione all'interno del documento HTML a cui aggiungere l'immagine o l'acquisizione PDF. Nell'esempio seguente lo screenshot verrà aggiunto a insertCode div

Passa infine qualsiasi richiesta parametri come dizionario JSON per il ConvertURL or ConvertHTML metodi. Nell'esempio seguente il ritardo è stato impostato su 1000ms e il formato su PNG. Tuttavia, se non sono necessarie altre opzioni aggiuntive, non è necessario specificare questo parametro.

<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>

Conversione di acquisizioni in un URI di dati

Lo DataURI il metodo seguente accetta una funzione di callback, questa funzione verrà quindi passata all'URI dei dati base64 dello screenshot o dell'acquisizione una volta che è stato eseguito il rendering, consentendo all'applicazione JavaScript un controllo ancora maggiore sull'acquisizione.

<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>

Metodi GrabzIt

Per iniziare, devi scegliere uno dei tre metodi seguenti per indicare ciò che desideri convertire.

  • ConvertURL([url to capture], [options]) - converte un URL, per impostazione predefinita uno screenshot di JPG. Il dizionario JSON contenente il parametri è facoltativo.
  • ConvertHTML([html to convert], [options]) - converte HTML, per impostazione predefinita into immagine JPG. Il dizionario JSON contenente il parametri è facoltativo.
  • ConvertPage([options]) - cattura la pagina corrente dell'utente, per impostazione predefinita into immagine JPG. Il dizionario JSON contenente il parametri è facoltativo.

Quindi scegliere uno o più di questi metodi, per specificare come si desidera creare l'acquisizione.

  • UseSSL() - forzatamente fare richieste tramite SSL.
  • Encrypt() - crittografa automaticamente una cattura con una chiave crittograficamente sicura.
  • AddPostVariable(name, value) - definisce un parametro HTTP Post e facoltativamente valore, questo metodo può essere chiamato più volte per aggiungere più parametri. L'uso di questo metodo forzerà GrabzIt a eseguire un post HTTP.
  • AddTemplateVariable(name, value) - definisce a modello personalizzato parametro e valore, questo metodo può essere chiamato più volte per aggiungere più parametri.
  • AddTo([element | element id]) - inserisce una cattura into l'elemento specificato.
  • Create() - inserisce l'acquisizione into l'inizio del tag body o se non è presente il nodo radice del documento HTML.
  • CreateInvisible() - l'acquisizione viene creata ma non mostrata nella pagina Web.
  • DataURI([callback function], [decrypt]) - restituisce l'URI dei dati base64 dell'acquisizione nel singolo parametro della funzione di callback. Se il parametro decrypt è true, decodificherà automaticamente tutte le acquisizioni crittografate.

Questa libreria di codici JavaScript è completamente open source! Se vuoi vedere o migliorare il codice sorgente puoi trovarlo su GitHub.