Блог

Я пытаюсь получить скриншот сложной веб-страницы. Единственное разумное решение, которое мне удалось найти, — это html2canvas, но оно не позволяет полностью корректно отображать страницу.

Это реальный скриншот: И это вывод html2canvas:

 html2canvas(document.body, {
  allowTaint: true,
  width: window.innerWidth,
  height: window.innerHeight,
  scrollX: window.pageXOffset,
  scrollY: window.pageYOffset,
  x: window.pageXOffset,
  y: window.pageYOffset
}).then(function(canvas) {
  var img = canvas.toDataURL("image/png");
  document.write('<img src="'   img   '"/>');
});
  

Я использую версию 0.5. Этот исходный код был взят непосредственно с главной страницы html2canvas.

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

P.S. Вариант использования — добавить кнопку в наше веб-приложение, которая позволила бы пользователям сообщать об ошибке с прикрепленным скриншотом.

Шаг: 1

Используйте тайм-аут для нанесения цвета и получения изображения.Предоставьте время, чтобы затем функционировать внутри.

 html2canvas(document.body, {
  allowTaint: true,
  width: window.innerWidth,
  height: window.innerHeight,
  scrollX: window.pageXOffset,
  scrollY: window.pageYOffset,
  x: window.pageXOffset,
  y: window.pageYOffset
}).then(function(canvas) { // timeout function
  var img = canvas.toDataURL("image/png");
  document.write('<img src="'   img   '"/>');
});
  

Шаг: 2

Да, у меня есть решения. Вы можете использовать phantom headless browser или chrome headless browser.

В вашем случае цвет диаграмм не применяется для отображения данных на диаграммах, и причина цветопередачи в плагине html2canvas.

Phantom js вы можете использовать верхний и нижний колонтитулы и все настройки.