Herramientas para capturar y convertir la web

Tomar capturas de pantalla del sitio web con JavaScriptAPI de JavaScript

El panel de diagnóstico puede ayudarte a depurar tu código!

El uso de GrabzIt JavaScript API es la forma más sencilla de colocar imágenes, capturas de pantalla DOCX o PDF, así como video a conversiones GIF animadas y aún más into su sitio web. Requerir solo el Biblioteca de JavaScript GrabzIt, una línea de código JavaScript y algo de magia GrabzIt!

De forma predeterminada, una vez que se ha creado una captura, permanecerá en caché en nuestros servidores durante el tiempo determinado por su paquete. Luego, si se realiza una llamada a la API de JavaScript de GrabzIt utilizando los mismos parámetros que una captura de pantalla previamente almacenada en caché que se devolverá, para evitar el uso innecesario de su asignación de captura de pantalla. Este comportamiento se puede deshabilitar mediante el uso de parámetro de caché.

Empezando

Para comenzar con la API de Javascript, siga estos pasos:

  1. Consigue tu gratis clave de aplicación.
  2. Descargar gratis Biblioteca de JavaScript y prueba el aplicación de demostración.
  3. Descubra los conceptos básicos sobre cómo funciona la API de JavaScript de GrabzIt leyendo la descripción general a continuación.

Para evitar que otras personas simplemente copien su código JavaScript y roben todos los recursos de su cuenta GrabzIt, debe autorizar qué dominios puede usar su clave de aplicación.

El ejemplo más simple

Para comenzar, descargue el Biblioteca de JavaScript GrabzIt e incluir el grabzit.min.js biblioteca en la página web donde desea que aparezca la captura o incluya una referencia a la versión CDN de grabzit.min.js biblioteca como se muestra a continuación. Luego incluya el siguiente código para agregar una captura de pantalla a la etiqueta del cuerpo de su página web. Deberá reemplazar el APPLICATION KEY con tu Clave de aplicación y reemplazar https://www.tesla.com con el sitio web del que desea tomar una captura de pantalla.

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

Luego, simplemente espere un momento y la imagen aparecerá automáticamente en la parte superior de la página, sin la necesidad de volver a cargar la página web. Aunque esta imagen se genera en el navegador, aún puede usar estas técnicas para save capturas en su propio servidor si lo desea.

Si desea usar GrabzIt como un módulo ES6, puede usar esto técnica, aparte de cómo se incluye GrabzIt en su JavaScript, funcionará exactamente de la misma manera que se detalla aquí.

Personalizando tus capturas de pantalla

Si bien se requieren la Clave de aplicación y los parámetros URL o HTML, todos los demás parámetros son opcionales Se agrega un parámetro agregando el parámetro con su valor como un diccionario JSON en el siguiente formato para cada parámetro opcional que necesite.

Por ejemplo, si desea tener una captura de pantalla con un ancho de 400px y una altura de 400px, en formato PNG y desea esperar 10 segundos antes de que se tome la captura de pantalla, haría lo siguiente.

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.3.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.3.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 la API de JavaScript tiene fácil acceso al HTML de una página web, también es ideal para capturar contenido dinámico de la página web o contenido detrás de un inicio de sesión.

Crear PDF y más

Para crear otro tipo de captura, como PDF, DOCX, CSV, JSON o Excel, simplemente especifique el formato deseado y se creará automáticamente. Por ejemplo, en los ejemplos a continuación estamos creando documentos DOCX y PDF a partir de URL y HTML, respectivamente, que luego se descargan automáticamente al navegador del usuario.

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

Es importante recordar que esto parámetro de descarga se puede usar para descargar automáticamente cualquier tipo de captura, como DOCX, PDF, PNG, JPG o CSV.

Agregar capturas de pantalla a elementos

El AddTo El siguiente método acepta la identificación de un elemento o un elemento DOM como la ubicación dentro del documento HTML para agregar la imagen o la captura de PDF. En el siguiente ejemplo, la captura de pantalla se agregará a insertCode div

Finalmente pasar cualquier requerido parámetros como un diccionario JSON para el ConvertURL or ConvertHTML métodos En el siguiente ejemplo, el retraso se ha establecido en 1000ms y el formato en PNG. Sin embargo, si no necesita ninguna otra opción adicional, no necesita especificar este parámetro en absoluto.

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

Convertir capturas a un URI de datos

El DataURI El método a continuación acepta una función de devolución de llamada, esta función pasará el URI de datos base64 de la captura de pantalla o captura una vez que se haya procesado, permitiendo que su aplicación JavaScript tenga aún más control sobre la captura.

<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.3.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.3.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 comenzar, debe elegir uno de los siguientes tres métodos para indicar lo que desea convertir.

  • ConvertURL([url to capture], [options]) - convierte una URL, por defecto una captura de pantalla JPG. El diccionario JSON que contiene el parámetros es opcional.
  • ConvertHTML([html to convert], [options]) - convierte HTML, por defecto into una imagen JPG. El diccionario JSON que contiene el parámetros es opcional.
  • ConvertPage([options]) - captura la página actual del usuario, por defecto into una imagen JPG. El diccionario JSON que contiene el parámetros es opcional.

Luego elija uno o más de estos métodos, para especificar cómo desea que se cree la captura.

  • UseSSL() - hacer a la fuerza solicitudes usando SSL.
  • Encrypt() - cifrar automáticamente una captura con una clave criptográficamente segura.
  • AddPostVariable(name, value) - define un parámetro HTTP Post y, opcionalmente, un valor, este método se puede llamar varias veces para agregar múltiples parámetros. El uso de este método obligará a GrabzIt a realizar una publicación HTTP.
  • AddTemplateVariable(name, value) - define un plantilla personalizada parámetro y valor, este método se puede llamar varias veces para agregar múltiples parámetros.
  • AddTo([element | element id]) - inserta una captura into el elemento especificado.
  • Create() - inserta la captura into el comienzo de la etiqueta del cuerpo, o si no está presente el nodo raíz del documento HTML.
  • CreateInvisible() - la captura se crea pero no se muestra en la página web.
  • DataURI([callback function], [decrypt]) - devuelve el URI de datos base64 de la captura en el parámetro único de la función de devolución de llamada. Si el parámetro descifrar es verdadero, descifrará automáticamente cualquier captura cifrada.

¡Esta biblioteca de códigos JavaScript es completamente de código abierto! Si desea ver o mejorar el código fuente, puede encontrarlo en GitHub.