Библиотека снимков экрана для Angular. Определите зону, она захватит ее и вернет строку, содержащую PNG base64.

В этом руководстве мы узнаем, как сделать снимок экрана веб-страницы с помощью Angular. Мы можем написать собственный код JavaScript для захвата экрана. Однако это трудоемкий процесс. У нас есть предопределенная библиотека для выполнения этой задачи в Angular. Это библиотека захвата ngx. Один из моих клиентов должен взять страницу веб-приложения как изображение (снимок экрана) и отправить его нескольким людям. Я пробовал использовать простой JavaScript. Это не было успешным. При выполнении этой задачи я встретил много ошибок. И я нашел захват ngx. Это сэкономило мне время. Я думал поделиться этим с вами, ребята. Это может быть очень полезно для тех, кому это нужно.

Таким образом, процесс очень простой и понятный.

  1. Определите тег HTML как корневой элемент.
  2. Захватите все элементы как изображение внутри корневого элемента с помощью библиотеки захвата ngx.

Это все. Никакой другой лишней работы. Он выводит изображение png base64. Вы можете сохранить это на своем сервере, если хотите.

Давайте посмотрим, как это сделать, на пошаговом примере.

Создать проект Angular

Создайте проект Angular, используя следующую команду на вашем терминале.

ng new demo-project

Установить библиотеку NGX-CAPTURE

Теперь установите библиотеку NGX-CAPTURE внутри проекта, используя следующую команду.

npm i ngx-capture

Импортировать в модуль приложения

Каждый раз, когда мы устанавливаем библиотеку, ее необходимо импортировать в файл app.module.ts. Поэтому сначала импортируйте NgxCaptureModule в файл app.module.ts.

Затем включите NgxCaptureModule в раздел импорта файла app.module.ts.

Сделать снимок

Теперь создайте тег div и добавьте идентификатор к тегу в файле home.component.html.

  1. экран - это идентификатор в приведенном выше коде.
  2. Событие щелчка, используемое для захвата страницы в виде изображения.

Теперь мы можем записать страницу как изображение с помощью NgxCaptureService. Поэтому импортируйте NgxCaptureService в файл home.component.ts.

Создайте ссылочную переменную для NgxCaptureService с помощью конструктора.

Создайте дочернюю ссылочную переменную представления для корневого элемента.

Затем вызовите функцию getImage (), чтобы зафиксировать элемент как изображение.

Это все. Он выводит изображение png base64. Теперь моя цель - сохранить изображение на сервере.

Преобразовать Base64 в изображение

Преобразуйте вывод base64 в изображение, используя приведенный ниже код.

Загрузить на сервер с помощью HTTP

Здесь я конвертирую строку base64 в изображение и передаю изображение на сервер с помощью HTTP.

Код PHP для захвата изображения

Этот код захватывает изображение и сохраняет его на сервере.

Полный код файла home.component.ts

Это все, ребята. Надеюсь, вам понравился этот урок. Следите за новостями, чтобы увидеть больше статей.

Если есть сомнения, прокомментируйте.

Спасибо, что прочитали эту статью.

Заключение

В этом руководстве вы узнали, как сделать снимок экрана с помощью Angular. Многие браузеры предлагают возможность захвата экрана. Однако интеграция внутри вашего приложения - утомительная задача. Здесь я привел код того, как преобразовать взятую строку base64 в изображение и как загрузить изображение с помощью PHP. Это полная реализация от получения изображения до его загрузки на сервер.

Ссылка на библиотеку:

https://www.npmjs.com/package/ngx-capture