Ferramentas para capturar e converter a Web

Capturar imagens de sites com JavaScriptAPI JavaScript

O Projeto painel de diagnóstico pode ajudá-lo a depurar seu código!

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.

Getting started

Para começar com a API Javascript, siga estas etapas:

  1. Obtenha seu grátis chave de aplicação.
  2. Faça o download gratuito Biblioteca JavaScript e experimente o aplicativo de demonstração.
  3. Descubra o básico sobre como a API JavaScript do GrabzIt funciona, lendo a visão geral abaixo.

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.

O Exemplo Mais Simples

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@3.4.7/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.7/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.

Personalizando suas capturas de tela

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 uma largura de 400px e uma altura de 400px, em um formato PNG e desejar aguardar 10 segundos antes da captura de tela, faça o seguinte.

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

Criando PDFs e mais

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@3.4.7/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.7/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.7/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.7/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.

Adicionando capturas de tela aos elementos

O Projeto 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@3.4.7/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.7/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>

Convertendo capturas em um URI de dados

O Projeto 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@3.4.7/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.7/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>

Métodos GrabzIt

Para começar, você deve escolher um dos três métodos a seguir para indicar o que deseja converter.

  • ConvertURL([url to capture], [options]) - converte um URL, por padrão, uma captura de tela JPG. O dicionário JSON que contém o parâmetros é opcional.
  • ConvertHTML([html to convert], [options]) - converte HTML, por padrão intuma imagem JPG. O dicionário JSON que contém o parâmetros é opcional.
  • ConvertPage([options]) - captura a página atual do usuário, por padrão intuma imagem JPG. O dicionário JSON que contém o parâmetros é opcional.

Em seguida, escolha um ou mais desses métodos, para especificar como você deseja que a captura seja criada.

  • UseSSL() - fazer à força solicitações usando SSL.
  • Encrypt() - criptografar automaticamente uma captura com uma chave criptograficamente segura.
  • AddPostVariable(name, value) - define um parâmetro HTTP Post e, opcionalmente, valor, esse método pode ser chamado várias vezes para adicionar vários parâmetros. O uso desse método forçará o GrabzIt a executar uma postagem HTTP.
  • AddTemplateVariable(name, value) - define um modelo personalizado parâmetro e valor, esse método pode ser chamado várias vezes para adicionar vários parâmetros.
  • AddTo([element | element id]) - insere uma captura into elemento especificado.
  • Create() - insere a captura into início da tag body, ou se esse não estiver presente, o nó raiz do documento HTML.
  • CreateInvisible() - a captura é criada, mas não mostrada na página da web.
  • DataURI([callback function], [decrypt]) - retorna o URI de dados base64 da captura no único parâmetro da função de retorno de chamada. Se o parâmetro decriptografar for verdadeiro, ele decriptografará automaticamente todas as capturas criptografadas.

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.