Недавно клиент попросил меня добавить форму обратной связи, которая фиксирует текущую открытую страницу пользователем. Причина этого заключалась в том, что в большинстве случаев пользователи не могли эффективно сообщить о проблеме. Таким образом, служба поддержки может легко понять проблему и решить ее, не обращаясь к клиентам за дополнительной информацией.
Проект построен на Ruby on Rails (5.2.0, Ruby-2.5.1). Я начал с создания базовой структуры контактной формы (Модель, Контроллер, Представление). Я включил ссылку на контактную форму в заголовок страницы, так как она должна быть доступна на каждой странице для авторизованных пользователей.
Я использую модальное окно начальной загрузки, чтобы открыть форму, и сделал вызов Ajax в бэкэнд, чтобы я мог сделать снимок экрана текущей открытой страницы. Макет моей формы выглядит следующим образом
Сделать снимок экрана
Теперь следующей задачей было сделать снимок экрана текущей открытой страницы. Я решил использовать библиотеку HTML5 Canvas для достижения этой цели.
Теперь давайте установим html2canvas с помощью npm, выполнив следующую команду
npm install - сохранить html2canvas
Как только это будет сделано, мы должны потребовать это в application.js, добавив следующую строку.
// = требуется html2canvas / dist / html2canvas.min.js
На этом шаге мы успешно установили html2canvas в наше приложение.
Прежде чем я перейду к собственно процессу захвата экрана, позвольте мне объяснить структуру HTML. Поскольку я включил кнопку в заголовок, при нажатии на нее открывается контактная форма.
Я добавил функцию нажатия для этой кнопки. При нажатии кнопки я помещаю снимок экрана в таблицу и конвертирую его в URL-адрес данных. Я включил скрытое поле в контактную форму для хранения выше URL-адреса создания данных изображения. При отправке формы эта строка в кодировке base64 будет сохранена в моей базе данных. Я использовал синтаксис CoffeeScript, и окончательная версия моего кода выглядит следующим образом
bind_feedback_box = -> $('#feedback-modal-btn').click -> html2canvas(document.body).then (canvas) -> screenshot = canvas.toDataURL() $('#feedback-modal #support_ticket_screenshot').attr('value', screenshot) $('#feedback-modal').modal() $ -> bind_feedback_box()
Поскольку мне нужно было сделать снимок всего экрана, я использовал document.body. Однако вы можете использовать любой другой селектор, если хотите захватить часть страницы.
Вот код моего контроллера.
class SupportTicketsController < ApplicationController def create @support_ticket = SupportTicket.new(support_ticket_params) @support_ticket.user = current_user if @support_ticket.save SupportTicketsMailer.new_support_ticket(current_user, @support_ticket, Tenant.current).deliver_now end end private def support_ticket_params params.require(:support_ticket).permit(:message, :screenshot) end end
Отправьте электронное письмо в службу поддержки со снимком экрана
В качестве последней части задачи я должен отправить электронное письмо в службу поддержки с изображением захвата. Вот как выглядит мой почтовик.
class SupportTicketsMailer < ApplicationMailer def new_support_ticket(user, support_ticket, tenant) @user = user @support_ticket = support_ticket @tenant = tenant attachments['screenshot.png'] = { mime_type: 'image/png', encoding: 'base64', content: @support_ticket.screenshot } mail(to: '[email protected]', subject: "New Support Ticket for #{@tenant.commercial_name}") end end
Если у вас возникли проблемы с включением html2canvas в application.js, вот мой файл.
Следующий
Затем мы также можем использовать этот созданный dataURL для загрузки снимков экрана в AWS S3 или любой другой сервис хранения данных.
Если у вас есть какие-либо отзывы или вопросы ко мне. Отправить мне сообщение! Спасибо за чтение!