O uso da API JavaScript GrabzIt é a maneira mais simples de colocar capturas de tela de imagens, DOCX ou PDF, bem como conversões de vídeo para GIF animado e mais into seu site. Exigindo apenas o Biblioteca JavaScript GrabzIt, uma linha de código JavaScript e alguma mágica do GrabzIt!
Por padrão, uma vez criada a captura, ela permanece em cache em nossos servidores pelo tempo determinado pelo seu pacote. Então, se uma chamada para a API JavaScript do GrabzIt for feita usando os mesmos parâmetros que uma captura de tela em cache anterior que será retornada, para evitar o uso desnecessário da permissão de captura de tela. Esse comportamento pode ser desabilitado usando o parâmetro de cache.
Para começar com a API Javascript, siga estas etapas:
Para impedir que outras pessoas apenas copiem seu código JavaScript e roubem todos os recursos da sua conta GrabzIt, você deve autorizar quais domínios pode usar sua chave de aplicativo.
Para começar, baixe o Biblioteca JavaScript GrabzIt e incluir o grabzit.min.js
biblioteca na página da web em que você deseja que a captura apareça ou inclua uma referência à versão CDN do grabzit.min.js
biblioteca como mostrado abaixo. Em seguida, inclua o código abaixo para adicionar uma captura de tela à etiqueta do corpo da sua página da web. Você precisará substituir o APPLICATION KEY
com o seu Chave do aplicativo e substitua https://www.tesla.com com o site do qual você deseja capturar uma captura de tela.
<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>
Em seguida, basta esperar um pouco e a imagem aparecerá automaticamente na parte superior da página, sem a necessidade de recarregar a página da web. Mesmo que essa imagem seja gerada no navegador, você ainda pode usar essas técnicas para save captura em seu próprio servidor se você desejar.
Se você quiser usar o GrabzIt como um módulo ES6, poderá usar este técnica, além de como o GrabzIt estiver incluído no seu JavaScript, ele funcionará exatamente da mesma maneira que detalhado aqui.
Embora a Chave do aplicativo e os parâmetros URL ou HTML sejam necessários, todos os outros parâmetros são opcionais. Um parâmetro é adicionado anexando-o ao seu valor como um dicionário JSON no formato a seguir para cada parâmetro opcional necessário.
Por exemplo, se você quiser ter uma captura de tela com 400px de largura e 400px de altura, em formato PNG e quiser esperar 10 segundos antes de fazer a captura de tela, você deve fazer o seguinte.
<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>
Como a API JavaScript tem fácil acesso ao HTML de uma página da web, também é ideal para capturar conteúdo dinâmico da página da web ou conteúdo atrás de um login.
Para criar outro tipo de captura, como uma planilha PDF, DOCX, CSV, JSON ou Excel, basta especificar o formato desejado e ele será criado automaticamente. Por exemplo, nos exemplos abaixo, estamos criando documentos DOCX e PDF a partir de URLs e HTML, respectivamente, que são baixados automaticamente no navegador do usuário.
<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>
É importante lembrar que este parâmetro de download pode ser usado para baixar automaticamente qualquer tipo de captura, como DOCX, PDF, PNG, JPG, JPG ou CSV.
A AddTo
O método abaixo aceita o ID de um elemento ou elemento DOM como o local no documento HTML ao qual adicionar a imagem ou captura de PDF. No exemplo abaixo, a captura de tela será adicionada ao insertCode
div.
Finalmente passe qualquer parâmetros como um dicionário JSON para o ConvertURL
or ConvertHTML
métodos. No exemplo abaixo, o atraso foi definido como 1000ms e o formato como PNG. No entanto, se você não precisar de outras opções adicionais, não precisará especificar esse parâmetro.
<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>
A DataURI
Como o método abaixo aceita uma função de retorno de chamada, essa função receberá o URI de dados base64 da captura de tela ou captura depois que ela for renderizada, permitindo que seu aplicativo JavaScript tenha ainda mais controle sobre a captura.
<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>
Para começar, você deve escolher um dos três métodos a seguir para indicar o que deseja converter.
Em seguida, escolha um ou mais desses métodos, para especificar como você deseja que a captura seja criada.
Esta biblioteca de códigos JavaScript é completamente de código aberto! Se você deseja visualizar ou melhorar o código-fonte, pode encontrá-lo em GitHub.