Html2canvas: Ненормальное расстояние между буквами в Chrome / Chromium

Расстояние между буквами (в данном случае расстояние между словами) на самом деле выглядит правильным, а вот что кажется неправильным, так это семейство шрифтов. Какую версию html2canvas вы используете? Можете ли вы воспроизвести проблему на jsfiddle?

Изменить: с letterRendering он должен отображаться по-другому, как вы упомянули.

Спасибо за ваш ответ,

Я использую версию 0.5.0-beta4 .

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

Обратите внимание, что я использую CodeMirror для ng2-codemirror .

Я безуспешно пытался воспроизвести проблему здесь .

Я также обнаружил ту же проблему в Firefox и Chrome. Если у вас есть правило CSS для межбуквенного интервала для текста, оно будет отображать текст с большими промежутками между каждым словом. Этого не было в версии 0.4.1, которая использовалась для идеальной визуализации текста, но в ней отсутствовали псевдоэлементы (: до: после)

Как только вы удалите правило letter-spacing все вернется в норму? Я не использую его ни в css моего компонента, ни в моем пользовательском файле css code-mirror .

Да. После удаления правила межбуквенного интервала из CSS проблема исчезла. между словами нет больших пробелов. это что-то в рендеринге страницы в части межбуквенного интервала, которая портит его.

Обновить! Я только что собрал библиотеку из последних исходников на master, и она отлично работает. пока все выглядит действительно хорошо. Раньше я пробовал с выпуском v0.5.0-beta4.

Изменить: обнаружена 1 проблема в firefox. фоновые изображения не обрезаются по тексту, когда
-webkit-background-clip: текст;
-webkit-text-fill-color: прозрачный;
используются.
Хотя отлично работает в хроме.

Я не использую свойство letter-spacing в своем CSS, и проблема все еще существует. Хотя я использую v0.5.0-beta4 .

Попробуйте построить из последних исходных кодов.

Готово, и все же это не решает проблему, дисплей остается прежним.

Должно быть исправлено с помощью https://github.com/niklasvh/html2canvas/commit/77d258f1d8eeccf7e38235463a293b512c1ca3d0

Похоже, проблема не устранена:

Вот как я отрендерил элемент:

html2canvas(document.body).then(function(canvas) {      
      document.body.appendChild(canvas);
});    

Я загрузил последнюю предварительную версию, упомянутую вами, и заменил старую.

@christopherkade исправит ли это, если вы установите опцию letterRendering: true ?

К сожалению, это не так, вот как я это делаю:

let element = document.getElementById('console');
const options = {
  letterRendering: true
};

html2canvas(element, options).then(function(canvas) {      
  document.body.appendChild(canvas);

  var url = canvas.toDataURL();
  var img = '<img src="' + url + '" style="border:0;"></img>'
  var x = window.open();
  x.document.open();
  x.document.write(img);
  x.document.close();
});

Тот же результат, если я попробую пример, приведенный в репозитории.

Я нашел обходной путь (и он не очень чистый):

// Package used to detect the browser used by the user
const browser = detect();
const element = document.getElementById('console');

// Set up my options
let options = {};
// For some reason foreignObjectRendering solves the spacing issue on Chrome but gives an error on Firefox, so I detect the browser and apply the adequate options.
if (browser && browser.name === 'chrome') {      
  options = {
    useCORS: true,
    foreignObjectRendering: true
  };  
}

// Open the canvas in a new window
html2canvas(element, options).then(function(canvas) {
  const url = canvas.toDataURL();
  const img = '<img src="' + url + '" style="border:0;"></img>'
  const x = window.open();
  x.document.open();
  x.document.write(img);
  x.document.close();
});

Обратите внимание, что ошибка, которую я получаю в Firefox при использовании второго варианта, выглядит следующим образом:

Непойманный (в обещании): [Исключение ... \ "Метод не реализован \" ...

Та же проблема!!

Решено здесь путем удаления атрибута CSS font-variant-numeric: пропорциональные числа из тела HTML.

Исправлена ​​аналогичная проблема с удалением font-variant: tabular-nums; ( in antd.css )

такая же проблема с арабским языком. Любое предложение, пожалуйста?

@mohafouad +1

Вы нашли какое-нибудь решение для этого? Спасибо.

@ 2xSamurai no: (

Я также исправил это, перейдя в div, который я хочу сделать снимком экрана, а затем я установил « font-variant: normal; », это сработало для меня, надеюсь, это поможет.

исправлено, если я добавляю font-variant: normal !important во внешний div всего содержимого (в проекте antd)

та же проблема сводила меня с ума

вариант шрифта: нормально! важно не работает

Ответ @ Malarkey-Jhu и @maaoui решил мою проблему.

У меня была проблема: семейство шрифтов не работало, а интервалы были очень нестабильными. Иногда у меня были перекрывающиеся буквы.

Что я делаю: во время экспорта я вызываю element.style.setProperty ('font-variant', 'normal') для элемента с текстом, и это позволяет семейству шрифтов отображаться правильно, а интервалы не должны быть шаткими . Затем я удаляю это свойство после завершения экспорта.

На основе приведенных выше решений эта проблема устранена для меня путем изменения -webkit-font-variant-ligatures и font-variant-ligatures на normal в файле css codemirror. Я использую CodeMirror версии 5.42.2 .