Использование GrabzIt JavaScript API - это самый простой способ создания скриншотов изображений, DOCX или PDF, а также преобразования видео в анимированные GIF и более intо вашем сайте. Требуя только GrabzIt JavaScript библиотека, строка кода JavaScript и немного магии GrabzIt!
По умолчанию после создания захвата он будет храниться в кэше на наших серверах в течение времени, определенного вашим пакетом. Затем, если вызов JavaScript API GrabzIt сделан с использованием тех же параметров, что и ранее кэшированный снимок экрана, который будет возвращен вместо этого, чтобы избежать ненужного использования вашего разрешения снимка экрана. Это поведение можно отключить с помощью параметр кэша.
Чтобы начать работу с API Javascript, выполните следующие действия:
Чтобы другие люди не могли просто скопировать ваш код JavaScript и украсть все ресурсы вашего аккаунта GrabzIt, вы должны авторизовать какие домены можете использовать свой ключ приложения.
Для начала загрузите GrabzIt JavaScript библиотека и включать grabzit.min.js
библиотека на веб-странице вы хотите, чтобы захват появился, или включить ссылку на версию CDN grabzit.min.js
библиотека, как показано ниже. Затем добавьте приведенный ниже код, чтобы добавить снимок экрана к тегу body своей веб-страницы. Вам нужно будет заменить APPLICATION KEY
с вашей Ключ приложения и заменить https://www.tesla.com с веб-сайта, который вы хотите сделать скриншот.
<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>
Затем просто подождите немного, и изображение автоматически появится в верхней части страницы, без необходимости перезагрузки веб-страницы. Хотя это изображение создается в браузере, вы все равно можете использовать эти методы для save захватывает на свой сервер если вы хотите.
Если вы хотите использовать GrabzIt в качестве модуля ES6, вы можете использовать это техникаКроме того, как GrabzIt включен в ваш JavaScript, он будет работать точно так же, как подробно описано здесь.
Хотя ключ приложения и параметры URL или HTML являются обязательными, все остальные параметры являются необязательными. Параметр добавляется путем добавления параметра со значением в виде словаря JSON в следующем формате для каждого необязательного параметра, который вам требуется.
Например, если вы хотите получить снимок экрана с шириной 400 пикселей и высотой 400 пикселей в формате PNG и вы хотите подождать 10 секунд, прежде чем снимок экрана будет сделан, вы должны сделать следующее.
<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>
Поскольку JavaScript API имеет легкий доступ к HTML веб-страницы, он также идеально подходит для захвата динамическое содержание веб-страницы или содержание за логином.
Чтобы создать другой тип захвата, такой как PDF, DOCX, CSV, JSON или Excel Spreadsheet, просто укажите желаемый формат, и он будет создан автоматически. Например, в приведенных ниже примерах мы создаем документы DOCX и PDF из URL и HTML соответственно, которые затем автоматически загружаются в браузер пользователя.
<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>
Важно помнить, что это параметр загрузки может использоваться для автоматической загрузки любого типа захвата, такого как DOCX, PDF, PNG, JPG или CSV.
Цена на AddTo
Приведенный ниже метод принимает идентификатор элемента или элемента DOM в качестве местоположения в документе HTML для добавления изображения или захвата PDF. В приведенном ниже примере снимок экрана будет добавлен в insertCode
див.
Наконец пройти любой необходимый параметры как словарь JSON для ConvertURL
or ConvertHTML
методы. В приведенном ниже примере задержка была установлена на 1000ms, а формат - на PNG. Однако, если вам не нужны никакие другие дополнительные опции, вам не нужно указывать этот параметр вообще.
<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>
Цена на DataURI
Приведенный ниже метод принимает функцию обратного вызова, затем этой функции передается URI данных base64 снимка экрана или захвата после его визуализации, что позволяет вашему приложению JavaScript еще больше контролировать захват.
<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>
Для начала вы должны выбрать один из следующих трех методов, чтобы указать, что вы хотите конвертировать.
Затем выберите один или несколько из этих методов, чтобы указать способ создания захвата.
Эта библиотека JavaScript кода полностью с открытым исходным кодом! Если вы хотите просмотреть или улучшить исходный код, вы можете найти его на GitHub.