Если вы хотите сделать скриншот части или всей вашей веб-страницы с помощью JavaScript, вы можете застрять. Создание изображения из HTML-элемента может показаться сложной задачей, поскольку в JavaScript нет прямого способа сделать это.

К счастью, это не невозможная задача и, на самом деле, довольно проста с соответствующими инструментами. Используя библиотеку html-to-image, создание изображений узлов DOM так же просто, как вызов одной функции.

Как работает html-to-image?

html-to-image библиотека создает изображение в виде URL-адреса данных base64. Он поддерживает несколько выходных форматов, включая PNG, JPG и SVG. Для выполнения этого преобразования библиотека использует следующий алгоритм:

  1. Создайте клон целевого элемента HTML, его дочерних элементов и любых прикрепленных псевдоэлементов.
  2. Скопируйте стиль для всех клонированных элементов и внедрите стиль в строку.
  3. Вставьте соответствующие веб-шрифты, если они есть.
  4. Вставьте любые изображения.
  5. Преобразуйте клонированный узел в XML, а затем в SVG.
  6. Используйте SVG для создания URL-адреса данных.
instagram viewer

Предостережения и ограничения

Несмотря на то, что html-to-image — отличная библиотека, она не идеальна. Он имеет несколько предостережений, а именно:

  • Библиотека не будет работать в Internet Explorer или Safari.
  • Если код HTML, который вы пытаетесь преобразовать, содержит поврежденный элемент холста, библиотека завершится ошибкой. В качестве МДН объясняет, что включение не одобренных CORS данных в ваш элемент холста испортит его.
  • Поскольку браузеры накладывают ограничения на максимальный размер URL-адреса данных, существуют ограничения на размер HTML, который может преобразовать библиотека.

Использование библиотеки

Чтобы попробовать библиотеку, первое, что вам нужно сделать, это создать каталог проекта на вашем локальном компьютере. Затем установите html-to-image в этот каталог, используя менеджер пакетов npm. Вот команда терминала для его установки:

нпм установить--сохранить html-to-image

Вы также должны установить сборщик JavaScript, чтобы немного упростить использование библиотеки. строить Bundler может помочь упаковать модули узла в веб-совместимые скрипты.

нпм установить строить

Это все, что вам нужно для установки. Далее создайте файл с именем index.html в вашем каталоге и обслуживайте его с помощью веб-сервера по вашему выбору. Поместите следующий код в index.html:

<!doctype html>
<html язык ="en">
<глава>
<мета кодировка ="UTF-8">
<мета имя ="окно просмотра"
 содержание ="ширина = ширина устройства, масштабируемый пользователем = нет, начальный масштаб = 1,0, максимальный масштаб = 1,0, минимальный масштаб = 1,0">
<мета http-эквивалент="X-UA-совместимый" содержание ="т.е. = край">
<заглавие>Документ</title>
<стиль>
 .colorful-div {
 набивка: 3рем;
 белый цвет;
 background-image: linear-gradient (вправо, желтый, rebeccapurple);
 граница: 1px сплошной черный;
 запас: 1рем авто;
 размер шрифта: 3rem;
 семейство шрифтов: скоропись;
 }
</style>
</head>
<тело>
<раздел класс ="красочный-div">
 я'm будет на скриншоте!
</div>
<раздел класс ="длинный текст">
 я'm пример достаточно подробного абзаца, который
 показывает, что создание скриншотов в JavaScript
 действительно очень легко по следующим причинам:
<ул>
<ли>Причина 1</li>
<ли>Причина 2</li>
<ли>Причина 2</li>
</ul>
</div>
<источник сценария ="out.js"></script>
</body>
</html>

Этот код создает на странице два элемента: div с градиентным фоном, текст и неупорядоченный список внутри другого div. Далее вы напишете JavaScript для преобразования этих элементов в изображения. Поместите следующий код в новый файл с именем script.js:

импорт * в качестве htmlToImage из "html-to-image";
константные элементы = ['.colorful-div', '.длинный текст']


элементы.для каждого((элемент, индекс) => {
константа узел = документ.querySelector (элемент)
htmlToImage.toPng(узел)
 .тогда(функция (URL-адрес данных) {
позволять изображение = новый Изображение();
 img.src = URL-адрес данных;
документ.тело.appendChild(изображение);
 })
 .ловить(функция(ошибка){
 консоль.ошибка('Упс! Что-то пошло не так!');
приставка.лог (ошибка)
 });
})

Этот код делает несколько вещей:

  • Импортирует библиотеку html-to-image.
  • Создает массив из селекторов CSS, предназначенных для двух элементов.
  • Создает изображение PNG в виде URL-адреса данных из каждого элемента массива.
  • Создает тег img и устанавливает для его атрибута src URL-адрес данных, создавая копии изображений двух элементов.

Теперь используйте esbuild для создания связанного файла (out.js), на который ссылается index.html, запустив в терминале следующее:

 ./node_modules/.bin/esbuild script.js --bundle --outfile=out.js

На данный момент вот как index.html должен выглядеть в вашем браузере:

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

Эта библиотека также работает с фреймворками JavaScript. документация html-to-image содержит инструкции по созданию других форматов изображений. Он также включает пример, показывающий, как использовать библиотеку с React.

Делать скриншоты с помощью JavaScript легко

Не существует собственного метода JavaScript для создания изображений из элементов HTML или создания снимков экрана DOM. Однако с помощью библиотек и сервисов, таких как html-to-image, это становится легкой задачей.

Есть и другие способы достижения аналогичных результатов, например библиотека wkhtmltoimage. Вы можете использовать этот инструмент с открытым исходным кодом, чтобы делать скриншоты всей веб-страницы.