Html2canvas: Fontawesome показывает пустые квадраты при использовании ForeignObjectRendering

У меня та же проблема. Вы нашли какое-нибудь решение? Я хотел бы использовать fontawesome, но он отображает пустые квадраты, когда я устанавливаю для ForeignObjectRendering значение true.

пока не повезло .. но если вы найдете решение, дайте мне знать, пожалуйста.

Мое временное решение состоит в том, чтобы поместить атрибут data-html2canvas-ignore="true" в div, содержащий значки Fontawesome. Например :
<span class="input-group-addon" data-html2canvas-ignore="true"><i class="fa fa-search"></i></span>
Но я хотел бы найти лучшее решение для отображения значков.

Та же проблема здесь.

то же самое в ПВА

если у кого-то все еще есть эта проблема - преобразование значков svg fontawesome в элементы холста решает ее для меня.
Вот код:

const ratio = window.devicePixelRatio || 1;
[...document.querySelectorAll("svg.svg-inline--fa")].map(svgElement => {
  // create a new canvas
  const canvas = document.createElement("canvas");

  // multiply the dimensions by the ratio (important for retina displays)
  canvas.width = svgElement.getBoundingClientRect().width * ratio;
  canvas.height = svgElement.getBoundingClientRect().height * ratio;

  // force the canvas css to have the same width and height as the original svg icon
  canvas.style.width = svgElement.getBoundingClientRect().width + "px";
  canvas.style.height = svgElement.getBoundingClientRect().height + "px";

  // hide the original svg icon and append the newly created canvas
  svgElement.style.display = "none";
  svgElement.parentNode.appendChild(canvas);

  // draw the original svg icon onto the new canvas
  var ctx = canvas.getContext("2d");
  var DOMURL = self.URL || self.webkitURL || self;
  var svgString = new XMLSerializer().serializeToString(svgElement);
  var img = new Image();
  var svg = new Blob([svgString], { type: "image/svg+xml;charset=utf-8" });
  img.src = DOMURL.createObjectURL(svg);
  img.onload = function() {
    ctx.drawImage(img, 0, 0);
  };
});

У меня проблема с обычными значками «fa-pencil», не использующими SVG. Я попробовал приведенный выше код и получил тот же результат без значков.

Есть шанс, что ваш шрифт awesome css находится в файле с именем, отличным от того, которое было распространено?

У меня такая же проблема, есть ли шанс, что ее исправят?

Та же проблема, @niklasvh есть ли обходной путь для этого? Или, может быть, вы можете рассказать нам, в чем проблема, чтобы мы могли рассказать об этом?

Это исправление решило мою проблему. Может вам поможет https://github.com/niklasvh/html2canvas/pull/1948/files

Я использую эти потрясающие шрифтовые значки:

1. fa fa-check-circle
2. фа фа восклицательный круг
3. фа фа-часы

В PDF-файле, который я создаю, он отображается в виде маленьких квадратов, и у меня проблема с хромом. Есть ли обходной путь для этих значков?? Пожалуйста, дайте мне знать, если есть обходной путь

То же самое.
Я использую «Font Awesome 5 Free», установленный с помощью npm @fortawesome/fontawesome-free
Все эти иконки не рендерятся, появляется только квадрат.

Сделал несколько тестов, и проблема появляется от RC2 до RC5.
Рабочий пример с rc1: https://jsfiddle.net/1kn5hzLr/7/

Не уверен, что связанные, но большие значки обрезаны.

Спасибо!

У меня похожая проблема при попытке сделать скриншот графика с помощью alchemyjs. Только квадраты отображаются для значка внутри svg foreignObject.

Если у кого-то есть время, я был бы признателен за отзывы о том, решает ли https://github.com/niklasvh/html2canvas/pull/2219 эту проблему рендеринга (похоже, это влияет на шрифты, которые содержат пробел в имени шрифта; Font Awesome 5 Free попадает в эту категорию).

Обновление: исправление в #2219 влияет только на отрисовку значков шрифтов на основе CSS; Рендеринг SVG/посторонних объектов не затрагивается. Я исправлю/скрою эти комментарии, чтобы не отвлекать других.

Для этого есть обходной путь CSS. Согласно @jayaddison PR, проблема, похоже, возникает из-за того, что значки шрифтов Awesome имеют шрифт «Font Awesome 5 Free», который html2canvas неправильно анализирует.

Решение в CSS состоит в том, чтобы сохранить файлы шрифтов font awesome локально, а затем использовать директиву css @font-face , чтобы переименовать их во что-то, что html2canvas будет правильно анализировать (т.е. без пробелов и без чисел). Для начала, вот что я использовал для решения своей непосредственной проблемы:

@font-face {
  font-family: 'fontawesome';
  src: url('../font/fa-solid-900.woff') format('woff');
}

.fa, .far, .fas {
  font-family: 'fontawesome' !important;
}

Чтобы убедиться, что это работает везде для всех ваших значков шрифтов, вам может потребоваться добавить больше шрифтов в семейство / добавить более полный CSS, но это должно помочь вам начать.

Надеюсь, это поможет кому-то

надеюсь, это поможет кому-то. Если вы используете значки svg, вы можете сделать что-то вроде этого:

var svgElements = document.body.querySelectorAll('svg.svg-inline--fa'');
svgElements.forEach(function(item) {
    item.setAttribute("width", item.getBoundingClientRect().width);
    item.setAttribute("height", item.getBoundingClientRect().height);
    item.style.width = null;
    item.style.height= null;
});

Атрибуты высоты и ширины требуются для элемента svg, чтобы они отображались https://stackoverflow.com/a/59162619/237917

У меня были те же проблемы с версией 1.0.0-rc.5. Обновление до 1.0.0-rc.7 исправило это для меня. Иконки Font Awesome 5 Free теперь работают безупречно.