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

Проект построен на 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 или любой другой сервис хранения данных.

Если у вас есть какие-либо отзывы или вопросы ко мне. Отправить мне сообщение! Спасибо за чтение!