Herramientas para capturar y convertir la web

Tomar capturas de pantalla del sitio web con JavaScript

API de JavaScript
La 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 mucho 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é.

Cómo Empezar

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.

  • Como actualmente no tiene dominios autorizados, ¡esta API de JavaScript no funcionará para usted! Por favor agrega tu dominio!

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

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 la 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 quisiera tener una captura de pantalla con un ancho de 400 px y una altura de 400 px, en formato PNG y quisiera esperar 10 segundos antes de que se tomara la captura de pantalla, haría lo siguiente.

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

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

La 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@/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>

Convertir capturas a un URI de datos

La 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@/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>

Métodos GrabzIt

Para comenzar, debe elegir uno de los siguientes tres métodos para indicar lo que desea convertir.

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

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