Сделайте скриншоты сайта с помощью JavaScript

Наблюдения и советы этой статьи мы подготовили на основании опыта команды панель диагностики может помочь вам отладить ваш код!

Использование GrabzIt JavaScript API - это самый простой способ создания скриншотов изображений, DOCX или PDF, а также преобразования видео в анимированные GIF и более intо вашем сайте. Требуя только GrabzIt JavaScript библиотека, строка кода JavaScript и немного магии GrabzIt!

По умолчанию после создания захвата он будет храниться в кэше на наших серверах в течение времени, определенного вашим пакетом. Затем, если вызов JavaScript API GrabzIt сделан с использованием тех же параметров, что и ранее кэшированный снимок экрана, который будет возвращен вместо этого, чтобы избежать ненужного использования вашего разрешения снимка экрана. Это поведение можно отключить с помощью параметр кэша.

Первые шаги

Чтобы начать работу с API Javascript, выполните следующие действия:

Получи бесплатно ключ приложения.
Скачать бесплатно Библиотека JavaScript и попробовать демонстрационное приложение.
Узнайте основы работы JavaScript API GrabzIt, прочитав приведенный ниже обзор.

Чтобы другие люди не могли просто скопировать ваш код JavaScript и украсть все ресурсы вашего аккаунта GrabzIt, вы должны авторизовать какие домены можете использовать свой ключ приложения.

Поскольку у вас в настоящее время нет авторизованных доменов, этот JavaScript API не будет работать для вас! пожалуйста добавьте свой домен!

Самый простой пример

Для начала загрузите GrabzIt JavaScript библиотека и включать grabzit.min.js библиотека на веб-странице вы хотите, чтобы захват появился, или включить ссылку на версию CDN grabzit.min.js библиотека, как показано ниже. Затем добавьте приведенный ниже код, чтобы добавить снимок экрана к тегу body своей веб-страницы. Вам нужно будет заменить APPLICATION KEY с вашей Ключ приложения и заменить https://www.tesla.com с веб-сайта, который вы хотите сделать скриншот.

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").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 секунд, прежде чем снимок экрана будет сделан, вы должны сделать следующее.

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", 
{"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 и больше

Чтобы создать другой тип захвата, такой как PDF, DOCX, CSV, JSON или Excel Spreadsheet, просто укажите желаемый формат, и он будет создан автоматически. Например, в приведенных ниже примерах мы создаем документы DOCX и PDF из URL и HTML соответственно, которые затем автоматически загружаются в браузер пользователя.

URL в PDF
HTML в PDF
URL для DOCX
HTML в DOCX

<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. Однако, если вам не нужны никакие другие дополнительные опции, вам не нужно указывать этот параметр вообще.

URL к изображению
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").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>

Преобразование захватов в URI данных

Наблюдения и советы этой статьи мы подготовили на основании опыта команды DataURI Приведенный ниже метод принимает функцию обратного вызова, затем этой функции передается URI данных base64 снимка экрана или захвата после его визуализации, что позволяет вашему приложению JavaScript еще больше контролировать захват.

URL к изображению
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").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>

GrabzIt Методы

Для начала вы должны выбрать один из следующих трех методов, чтобы указать, что вы хотите конвертировать.

ConvertURL([url to capture], [options]) - конвертирует URL, по умолчанию скриншот JPG. Словарь JSON, содержащий параметры не является обязательным.
ConvertHTML([html to convert], [options]) - конвертирует HTML, по умолчанию intизображение JPG. Словарь JSON, содержащий параметры не является обязательным.
ConvertPage([options]) - захватывает текущую страницу пользователя, по умолчанию intизображение JPG. Словарь JSON, содержащий параметры не является обязательным.

Затем выберите один или несколько из этих методов, чтобы указать способ создания захвата.

UseSSL() - принудительно сделать запросы с использованием SSL.
Encrypt() - автоматически шифровать захват с помощью криптографически безопасного ключа.
AddPostVariable(name, value) - определяет параметр HTTP Post и, необязательно, значение; этот метод может вызываться несколько раз для добавления нескольких параметров. Использование этого метода заставит GrabzIt выполнить сообщение HTTP.
AddTemplateVariable(name, value) - определяет пользовательский шаблон параметр и значение, этот метод может быть вызван несколько раз, чтобы добавить несколько параметров.
AddTo([element | element id]) - вставляет захват into указанный элемент.
Create() - вставляет захват into начало тега body или, если это не так, корневой узел документа HTML.
CreateInvisible() - захват создан, но не показан на веб-странице.
DataURI([callback function], [decrypt]) - возвращает URI данных base64 захвата в одном параметре функции обратного вызова. Если параметр decrypt равен true, он автоматически расшифрует любые зашифрованные записи.

Эта библиотека JavaScript кода полностью с открытым исходным кодом! Если вы хотите просмотреть или улучшить исходный код, вы можете найти его на GitHub.